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 。