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