Grunt in action

Grunt 是一个自动任务运行器，会安装预先定义的顺序自动运行一系列的的任务，可以简化工作流程，减少重复性的工作从而提高工作交流，

这篇简易教程会从0着手详细介绍grunt。

1、安装

grunt是基于nodejs的，如果你还没有安装，请从http://nodejs.org/下载安装windows版或者Linux版，安装nodejs后，运行如下命令:

sudo npm install -g grunt-cli
grunt-cli是grunt命令行工具，-g 表示全局安装。安装命令行工具后需要安装模块才能使用相应的模块，模块安装推荐局部安装，因为不同的项目对模块版本的要求可能是不一样的。

2、环境搭建

一般需要在你的项目中添加两个文件：packeage.json 和Gruntfile(Gruntfile.js for js，Gruntfile.coffee for coffeescript)

package.json : 此文件被npm用于存储项目的元数据，以便次项目可以发布为npm模块，并且可以在这个文件中指定项目依赖的grunt或者grunt plugin，这些依赖信息放在 devDependencies字段里

GruntFile ：用来配置或定义任务(task)并加载grunt plugin的。

生成package.json

首先在项目的根目录下建一个文件名为package.json文件，或者通过npm init 生成一个。为了介绍方便，我们从grunt官网上找一个现成的文件,内容如下：

{
“name”: “my-project-name”,
“version”: “0.1.0”,
“author”: “Your Name”,
“devDependencies”: {
“grunt”: “0.x.x”,
“grunt-contrib-jshint”: “*”,
“grunt-contrib-concat”: “~0.1.1”,
“grunt-contrib-uglify”: “~0.1.0”,
“grunt-contrib-watch”: “~0.1.4”
}
}
稍微解释下里面的devDependencies，grunt核心模块为最新的0.x.x版，jshint插件为最新版本，concat插件不低于0.1.1版，uglify插件不低于0.1.0版，watch插件不低于0.1.4版。

然后就可以通过命令行安装模块了，将相应的模块装到该目录下的node_modules文件夹内，命令如下：

npm install
当然如果已经有package.json不包括相应的模块，就可以一个一个安装，命令如下：

npm install <module> –save-dev
可以通过下面的命令安装同样的模块：

npm install grunt –save-dev
npm install grunt-contrib-jshint –save-dev
npm install grunt-contrib-concat –save-dev
npm install grunt-contrib-uglify –save-dev
npm install grunt-contrib-watch –save-dev
需要补充的是–save-dev 不但可以安装对应的模块，还没有保存到devDependencies字段内。

建立Gruntfile文件

在package.json文件的统计目录，建立一个GruntFile.js文件，它是grunt的配置文件。包括如下几个方法：

wrapper函数
项目与任务配置
加载grunt插件和任务
4. 自定义任务

要遵循nodejs的模块写法，grunt作为参数：

module.exports = function(grunt) {
// 配置Grunt各种模块的参数
grunt.initConfig({
jshint: { /* jshint的参数 */ },
concat: { /* concat的参数 */ },
uglify: { /* uglify的参数 */ },
watch: { /* watch的参数 */ }
});
// 从node_modules目录加载模块文件
grunt.loadNpmTasks(‘grunt-contrib-jshint’);
grunt.loadNpmTasks(‘grunt-contrib-concat’);
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-watch’);
// 每行registerTask定义一个任务
grunt.registerTask(‘default’, [‘jshint’, ‘concat’, ‘uglify’]);
grunt.registerTask(‘check’, [‘jshint’]);
};
grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。

grunt.loadNpmTasks：加载模块。

grunt.registerTask：定义具体的任务，第一个参数为任务名(即grunt 后面的参数，如 grunt check)，第二个参数是一个数组，表示该任务需要依次使用的模块。default任务名表示，如果直接输入grunt命令，后面不跟任何参数所调用的模块；该例的check任务则表示使用jshint插件对代码进行语法检查。

3、Grunt例子，更多的例子可以访问http://gruntjs.com/plugins，找你需要的插件。

(1) grunt-contrib-cssmin,cssmin模块的作用是最小化CSS文件

首先，在项目的根目录下安装该模块。
npm install grunt-contrib-cssmin –save-dev
完整的代码如下：

module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
minify: {
expand: true,
cwd: ‘css/’,
src: [‘.css’, ‘!.min.css’],
dest: ‘css/’,
ext: ‘.min.css’
},
combine: {
files: {
‘css/out.min.css’: [‘css/part1.min.css’, ‘css/part2.min.css’]
}
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-cssmin’);
grunt.registerTask(‘default’, [‘cssmin:minify’,’cssmin:combine’]);
};
expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。

cwd：需要处理的文件（input）所在的目录。

src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。

dest：表示处理后的文件名或所在目录。

ext：表示处理后的文件后缀名。

(2)grunt-contrib-jshint,js文件静态检查

它在grunt.initConfig方法里面的配置代码如下：

jshint: {
options: {
eqeqeq: true,
trailing: true
},
files: [‘Gruntfile.js’, ‘lib/*/.js’]
}
完整的jshint配置可以参考这里：http://jshint.com/docs/options/。eqeqeq表示要用===取代==，trailing表示行尾不得有多余的空格，files表示要检查的文件。

(3)grunt-contrib-concat,用来合并文件，不止合并js文件，还可以合并css文件。

concat: {
js: {
src: [‘lib/module1.js’, ‘lib/module2.js’, ‘lib/plugin.js’],
dest: ‘dist/script.js’
}
css: {
src: [‘style/normalize.css’, ‘style/base.css’, ‘style/theme.css’],
dest: ‘dist/screen.css’
}
},
(4)grunt-contrib-uglify,用来压缩代码

uglify: {
options: {
banner: bannerContent,
sourceMapRoot: ‘../’,
sourceMap: ‘distrib/’+name+’.min.js.map’,
sourceMapUrl: name+’.min.js.map’
},
target : {
expand: true,
cwd: ‘js/origin’,
src : ‘*.js’,
dest : ‘js/’
}
},
详细的解释配置：https://www.npmjs.com/package/grunt-contrib-uglify

(5)grunt-contrib-watch,监控文件，然后自动执行任务

watch: {
scripts: {
files: ‘*/.js’,
tasks: ‘jshint’,
options: {
livereload: true,
},
},
css: {
files: ‘*/.sass’,
tasks: [‘sass’],
options: {
livereload: true,
},
},
}
设置好上面的代码，打开另一个进程，运行grunt watch。此后，任何的js代码变动，文件保存后就会自动运行jshint任务；任何sass文件变动，文件保存后就会自动运行sass任务。

4、其他的模块

(1)grunt-contrib-clean,删除文件或目录

clean: {
build: {
src: [“path/to/dir/one”, “path/to/dir/two”]
}
}
(2) grunt-contrib-connect,在本机运行一个Web Server

(3)grunt-htmlhint html语法检查

5 自动加载grunt plugin

有时候删除一个插件而忘了更新Gruntfile文件，这时候运行就会报错，构建将会停止。你想象一下，如果有很多插件手动维护还是挺麻烦的，我们可以通过一个比较小巧的插件(load-grunt-tasks)实现,有了它，多行的

grunt.loadNpmTasks(‘grunt-contrib-concat’);
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-imagemin’);
就可以变成一行：

require(‘load-grunt-tasks’)(grunt);
6 使用load-grunt-config插件将Gruntfile拆分

详细的参考http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/

参考链接：

http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/

http://www.sitepoint.com/writing-awesome-build-script-grunt/

http://javascript.ruanyifeng.com/tool/grunt.html

https://www.npmjs.com/package/grunt-contrib-jshint

http://www.gruntjs.net/docs/getting-started/