请确保自己会使用 node 和 npm 且电脑上已经安装这两个工具。
先来比较一下 grunt 和 gulp 的 logo 和它们本质的不同之处：
grunt：
gulp：
通过对比我们发现 grunt 的网站开门注也就是它的优点：JavaScript 任务运行器。而和它类似的 gulp 的在 npm 上的开门注是：流式构建系统。这说明什么那？就是说 gulp 除了具有 grunt 的自动化处理的特点，更重要的是 gulp 底层是用 stream（流）处理文件，不是想 grunt 那样简单的读写文件，所以 gulp 保护硬盘杠杠的。用哪个还用讲吗，至于为什么还要学 grunt，脑子抽风。。。
不扯了，现在来学习直接进入项目学习。
一、less 转化成 css
桌面新建 grunt_study 文件，进入文件 npm init 创建 package.json 文件。
现在全局安装 grunt-cli
npm install -g grunt-cli
在项目里面安装：
npm install --save grunt
因为的翻译 less 所以还的装一个插件，grunt-contrib-less 任然是项目目录里面安装：
npm install --save grunt-contrib-less
在 grunt_study 文件夹里面新建 Gruntfile.js 文件（首字母大写小写都行）。文件里面的内容配置来自：
// 默认暴露一个函数
// 因为在全局安装了grunt-cli
// 当我们在项目目录输入命令 grunt 的时候
// 这个Gruntfile.js 文件会自动执行
// 这部分官网叫做"wrapper(包裹的意思)"函数，它里面需要封装繁琐的配置。
module.exports = function(grunt) {
// 插件配置项通过grunt.initConfig来初始化
grunt.initConfig({
less: {
development: {
// less.less 这个文件翻译后到path/to/result.css
files: {
'path/to/result.css': 'less.less'
}
}
}
});
// 插件安装之后，通过grunt.loadNpmTasks启用（加载）这个插件
grunt.loadNpmTasks('grunt-contrib-less');
// register是注册的意思
// 注册一个task,用来执行你配置的任务。
// 本段我们在default上注册了一个less任务
grunt.registerTask('default', ['less']);
};
我们就在 grunt_study 文件夹里面新建一个 less.less 文件，并书写文件内容：
body{
width: 100px;
height: 100px;
@w:900px;
@color:#456;
div{
width: @w;
background-color: @color;
}
}
此时，打开 CMD 窗口，直接输入 grunt ：
C:\Users\Administrator\Desktop\grunt_study\>grunt
Running "less:development" (less) task
>> 1 stylesheet created.
Done.
C:\Users\Administrator\Desktop\grunt\node_modules\.bin>
找到生成的 result.css 文件查看内容：
body {
width: 100px;
height: 100px;
}
body div {
width: 900px;
background-color: #456;
}
顺利把 less 变成了 css。下面来详细的了解一下整个过程。
二、深入学习 grunt
只要上面的项目跑起来基本，就知道的差不多了。
代码的基本组成情况：
- 默认暴露一个包装函数
module.exports = function(grunt) {
//所有的代码都必须写在这里
};
- 任务（task）配置和目标（target）
grunt.initConfig({
//配置/插件代码
});
以 grunt-contrib-less 的示例代码为例：
grunt.initConfig({
// less 这是一个task
// task里面有两个target
less: {
// 一个target是development
development: {
...
},
// 一个target是production
production: {
...
}
}
});
- registerTask 注册执行
grunt.registerTask('default', ['less']);
如果注册到 default 上面，那么运行的时候直接 grunt 就行，如果随便起个名字，例如：
grunt.registerTask('lessTocss', ['less']);
这时候运行就不能直接运行 grunt 了，而是 grunt lessTocss。grunt 两个执行的方法和 gulp 的 export 特别的像。但是我要说但是了，与 gulp 不同的是 grunt task 里面还有 target 。当我们使用 default 注册的时候，使用 grunt 运行程序的时候，你会发现程序默认执行的是：
C:\Users\Administrator\Desktop\grunt_study\>grunt
Running "less:development" (less) task
>> 1 stylesheet created.
Done.
C:\Users\Administrator\Desktop\grunt\node_modules\.bin>
Running "less:development" (less) task 运行的是 less:development 也就是 task 里面的 target(development)。这样的话我们就可以让它去执行第二个 target（production），方法两种：
- 直接改源代码
由
grunt.registerTask('default', ['less']);
改为;
grunt.registerTask('default', ['less:production']);
2.在命令行使用内置的 API
let target = grunt.option('target') || 'development';
grunt.registerTask('default', ['less:' + target]);
命令行里面不是简单的输入 grunt 而是执行：
grunt default --target=production
grunt.option('target') 的核心技能就是能够得到我们在CMD窗口输入的值也就是 target 等于号后面的内容。同时let target = grunt.option('target') || 'development'; 使用了 或 运算，防止我们不输入，程序可以自动执行第一项，防止出错。
这就是 grunt 和 gulp 在执行任务时候的稍稍不同。
- loadNpmTasks 加载插件
这个 API 没啥好解释的，插件要用首先的加载。
grunt.loadNpmTasks('grunt-contrib-less');
- options 属性
官网说是：在一个任务配置中，options 属性可以用来指定覆盖内置属性的默认值。其实就是插件的个性化设置，就比如我们的 less 转 css 插件，如果不设置 options ，我们转化完成的结果发现，文件的格式不变，没有压缩空格缩进。
development: {
options: {
compress: true
},
files: {
'path/to/result.css': 'less.less'
}
}
我们只需要在 options 里面加入 compress: true 转化的文件就变成了压缩格式，不在保留空格和缩进。如下：
body{width:100px;height:100px}body div{width:900px;background-color:#456}
这个 options 还像变量一样分全局和局部。基本和变量概念差不多。没啥意思。
- files 路径问题
files 十个对象，对象里面有 k:v 对，v 是读取要处理的文件，多个还可以用数组给组合在一起，k 是经过处理的文件处理完成放的路径和重命名的文件名。
files: {
'path/to/result.css': 'less.less'
}
最后来看看我整合以上知识点在对 grunt-contrib-less 插件进行配置的代码，能看懂就说明你真的全部懂了，恭喜！：
module.exports = function(grunt) {
grunt.initConfig({
less: {
// 开发环境
development: {
options: {
// 处理过得文件去掉缩进是压缩版的
compress : true,
paths: ["assets/css"] // @import 加载文件的路径
},
files: {
"path/to/result.css": "path/to/source.less" // 将path/to/source.less编译为path/to/result.css
}
},
// 线上环境
production: {
options: {
paths: ["assets/css"], // @import 加载文件的路径
cleancss: true, // 压缩css文件
modifyVars: { // 重新定义全局变量
imgPath: '"http://mycdn.com/path/to/images"',
bgColor: 'red'
}
},
files: {
"path/to/result.css": "path/to/source.less"
}
}
}
});
// 插件使用前加载
grunt.loadNpmTasks('grunt-contrib-less');
// 开发环境 CMD 窗口请使用 grunt lessDev
grunt.registerTask('lessDev', ['less:development']);
// 线上环境 CMD 窗口请使用 grunt lessPro
grunt.registerTask('lessPro', ['less:production']);
};
这里就没有使用更多的插件演示了，一个就够了。而且 gulp 这么好用，谁去用 grunt 。
请看：gulp 使用指南
