Grunt.js 初使用

由于项目中的需求要用到 grunt.js ，了解使用之后感觉各种高端、牛逼、方便、好使呀，里面有各种插件，基本上能满足一般的项目需求了，而我们的项目中暂时只用到 grunt-contrib-less、grunt-contrib-watch 而已，还有 grunt-contrib-htmlmin、grunt-contrib-jshint 等等，更多插件请到 这里 瞄瞄吧。

要使用 grunt.js ，则必须要配置 node.js 环境，现在配置 node 环境简单多了，直接去 node 官网下载个安装就行了，而且还自带了 npm 包管理器，也不要自己去手动安装了。

1、安装完之后，打开命令行，输入 npm install -g grunt-cli 安装 grunt；
2、新建文件夹（如 grunt-demo），在此文件夹新建 package.json 文件，文件代码如下：

?

1 2 3 4 5 6 7 8 9

{      "name" : "my-grunt-demo" ,      "version" : "0.1.0" ,      "devDependencies" : {          "grunt" : "*" ,          "grunt-contrib-less" : "*" ,          "grunt-contrib-watch" : "*"      } }

3、在命令切换到该文件夹目录下，输入 npm install 安装 package.json 里面依赖的包；
4、再新建 Gruntfile.js 文件，代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

module.exports = function (grunt) {        grunt.initConfig({          less: {              // 编译              compile: {                  files: {                      'assets/css/main.css' : 'assets/css/main.less'                  }              },              // 压缩              yuicompress: {                  files: {                      'assets/css/main-min.css' : 'assets/css/main.css'                  },                  options: {                      yuicompress: true                  }              }          },          watch: {              scripts: {                  files: [ 'assets/css/*.less' ],                  tasks: [ 'less' ]              }          }      });        grunt.loadNpmTasks( 'grunt-contrib-less' );      grunt.loadNpmTasks( 'grunt-contrib-watch' );        grunt.registerTask( 'default' , [ 'less' , 'watch' ]);   };

5、然后就可以在 assets/css/ 目录下新建 less 文件，使用 less 语法来编写项目样式；
6、写完之后在命令行输入 grunt 运行即可生成编译后和压缩后的 css 文件了。

但是每次在 less 文件里写完之后都要执行一次命令是不是很麻烦呢？有没有可以自动化执行的？当然有！程序猿怎么能把时间浪费在这每次手动编译的时间里呢？细心的你留意到 grunt-contrib-watch 了吧？没错，这货就是用来干这事的。在命令行里输入 grunt watch 即可，然后你再编译下你的 less 文件，按保存的时候再看看命令行终端，是不是自动为你编译了？如此简单神奇。

这里记录了下简单的流程，至于具体的用法可以查看下 grunt.js 的官网和它的 github 。