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/