由于项目中的需求要用到 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 。