如何设置Grunt

标签：des   style   blog   http   color   io   os   ar   for   

原文地址：

Step 1: Install Node.js

Download a Node installer and run it. Installation packages are available for Mac, Windows, Linux, and SunOS. Alternatively, you can compile and install it from source.

Step 2: Install Grunt

Install Grunt using the Node package manager: （安装在Global）

$ npm install -g grunt
$ npm install -g grunt-cli

Providing -g installs the package globally.

Providing -g installs the package globally.

Step 3: Create a Gruntfile.js 

Now create a file called Gruntfile.js in your project directory.

Then copy and paste in the example configuration shown just below this paragraph. You‘ll just need to change the (commented) lines that define which files Grunt should keep an eye on, as well as the source and destination paths to the LESS and CSS files.

Example:

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      development: {
        options: {
          compress: true,
          yuicompress: true,
          optimization: 2
        },
        files: {
          // target.css file: source.less file
          "css/main.css": "less/main.less"
        }
      }
    },
    watch: {
      styles: {
        files: [‘less/**/*.less‘], // which files to watch
        tasks: [‘less‘],
        options: {
          nospawn: true
        }
      }
    }
  });

  grunt.loadNpmTasks(‘grunt-contrib-less‘);
  grunt.loadNpmTasks(‘grunt-contrib-watch‘);

  grunt.registerTask(‘default‘, [‘watch‘]);
};

Note that supplying /**/ in the watch path will watch files recursively under that directory.

Step 4: Configure the package file

If you do not have an existing package.json file in your project directory, create one:（创建Config file）

$ cd YOUR_PROJECT_DIRECTORY
$ npm init

When you have a valid package.json file, open it and add the following development dependencies: （设置需要哪些Dependencies）

"devDependencies": {
  "grunt": "~0.4.5",
  "grunt-contrib-less": "~0.11.0",
  "grunt-contrib-watch": "~0.6.1"
},

Then install the package dependencies:（在打Grunt的时候安装Dependencies）

$ npm install

Step 5: Start Grunt

$ grunt

While Grunt is running, it will compile your stylesheets every time you 

讨论，按照如上设置后会出现一个node_modules文件夹，里面有grunt， grunt-contrib-less， grunt-contrib-watch，由于其文件path太长，导致VS deploy的时候出错，并且会在Recycle bin里创建几千个offline.html, 建议每次deploy的时候手动把node_modules移出project。

如何设置Grunt

标签：des   style   blog   http   color   io   os   ar   for   

原文地址：http://www.cnblogs.com/shawnzxx/p/4025567.html