Gruntjs是前端项目构建工具，基于node的命令行工具。很多公司或者js项目都是用gruntjs来搭建，例如jQuery，twitter，Qunit等。主要功能有：
相对于Ant的打包工具，grunt更加灵活，语法采用json，比xml语法更加简洁，作为前端工程师可能更喜欢写json。
Grunt是基于nodejs的，所以安装GruntJS之前，需要保证你的电脑有nodejs环境，node环境比之前安装简单多了，现在windows平台只需要下载node安装程序，一路next就可以了。
在命令行中，执行npm install -g grunt-cli，来安装grunt-cli
在项目路径下的命令行中，输入npm install grunt-plugin-name --save-dev就可以完成插件安装，或者直接修改grunt的package.json，然后执行npm install，npm会自动安装想用插件。
每个GruntJS都包括两个文件：
一个典型的package.json内容如下：
1 2 3 4 5 6 7 8 9 10 11 | {
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.0",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-uglify": "~0.1.0",
"grunt-contrib-watch": "~0.1.4"
}
}
|
如果安装了新的插件，那么这个package.json会自动更新的，或者修改它，然后执行npm install，也可以安装对应的插件。
Gruntfile.js是node module格式的任务管理文件，例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | module.exports = function(grunt) { // 以下代码初始化Grunt任务 grunt.initConfig({ // js语法检查 jshint: { /*…*/ }, // 需要合并的任务 concat: { /*…*/ }, // 压缩 uglify: { /*…*/ }, // watch任务 watch: { /*…*/ } }); // 加载package.json中的想用插件 grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); // 注册一个任务，第二参数可以是数组或者字符串 // 默认会执行default任务. grunt.registerTask('default', ['jshint', 'concat', 'uglify']); }; |
JSHint是JSLint的一个分支，可以用于js语法规则、错误检测。
1 2 3 | jshint: {
files: ['Gruntfile.js', 'lib/**/*.js']
},
|
1 2 3 4 5 6 7 8 9 10 | 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'
}
},
|
uglifyjs就不用介绍了，jQuery就是用它压缩的。
1 2 3 4 5 6 | uglify: {
dist: {
src: ['<%= concat.js.dest %>'],
dest: 'dist/script.min.js'
}
},
|
watch功能是Grunt的实时处理任务，当监控的文件发生变化的时候，则执行相应的任务。
1 2 3 4 | watch: {
files: '<%= jshint.files %>',
tasks: 'jshint'
},
|
除了上面的任务外，还有很多插件，参考文章《双屏切图：使用livereload实现自动刷新》