标签：grunt
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=\‘#\‘" /‘,
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=\‘#\‘" /module1.js‘, ‘lib/module2.js‘, ‘lib/plugin.js‘],
dest: ‘dist/script.js‘
}
css: {
src=\‘#\‘" /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=\‘#\‘" /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/
本文出自 “Eason's hcc” 博客，请务必保留此出处http://hcc0926.blog.51cto.com/172833/1617645
标签：grunt
原文地址：http://hcc0926.blog.51cto.com/172833/1617645
