grunt 是前端开发的自动化构建工具，对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting 等，自动化工具可以减轻你的劳动，简化你的工作。
下面志文工作室以一个项目的构建为例，简介入门 grunt 进行前端开发的过程，主要涉及到 javascript 代码合并与压缩，css 代码合并与压缩，以及图片压缩。
1. 安装
grunt 依赖 nodejs，首先安装下载 nodejs:
安装 nodejs 后，打开命令行，安装 grunt-cli，执行命令：
npm install -g grunt-cli
2. 配置 grunt 项目文件
在项目中配置 grunt 所需文件，grunt 即可知道如何自动化工作。
这里主要工作是在项目的根目录创建 package.json 与 Gruntfile.js 两个文件。
2.1 创建 package.json 文件
执行命令：
npm init
按提示逐步操作即可。
该文件主要配置项目基本信息及工具插件依赖，以让 nodejs 知道下载哪些插件。具体可参考如下配置：
{
"name": "lxxh",
"version": "0.0.2",
"description": "不花流量看离线笑话",
"author": "志文工作室",
"license": "BSD",
"engines": {
"node": ">= 0.8.0"
},
"scripts": {
"test": "grunt qunit"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.2",
"grunt-css": ">0.0.0",
"grunt-contrib-imagemin": ">0.8.0",
"grunt-contrib-jshint": "~0.6.2",
"grunt-contrib-concat": "~0.3.0"
}
}
或参考如下文件：
{
"name": "jquery-plugin",
"version": "0.0.0-ignored",
"engines": {
"node": ">= 0.8.0"
},
"scripts": {
"test": "grunt qunit"
},
"devDependencies": {
"grunt-contrib-clean": "~0.4.0rc6",
"grunt-contrib-jshint": "0.1.1rc6",
"grunt-contrib-qunit": "0.1.1rc6",
"grunt-contrib-concat": "0.1.2rc6",
"grunt-contrib-uglify": "0.1.1rc6",
"grunt-contrib-watch": "0.2.0rc5",
"grunt": "0.4.0rc7"
}
}
https://github.com/cowboy/jquery-tiny-pubsub/blob/master/package.json
2.2 创建 Gruntfile.js 文件
该文件主要为 grunt 所使用。
配置参考如下：
module.exports = function(grunt) {
grunt.initConfig({
//如果需要用到 package.json 中的参数变量，可使用 pkg 引用（如 pkg.name）
pkg : grunt.file.readJSON('package.json'),
//JSHint 代码质量检查任务
jshint: {
all: ['www/js/index.js'] //files to lint
},
//concat 多文件合并任务
concat: {
js: {
options: {
separator: ';' //多文件分隔符
},
src: ['www/js/*.js'], //合并哪些文件
dest: 'www/index.min.js' //合并后输出
},
css : {
src: ['www/css/*.css'],
dest: 'www/index.min.css'
}
},
//uglify 压缩任务，压缩 js
uglify: {
js: {
files: {
'www/js/index.min.js': ['www/js/index.min.js'] //替换保存
}
}
},
//cssmin 压缩任务，压缩 css
cssmin: {
css: {
src: 'www/index.min.css',
dest: 'www/index.min.css'
}
},
//图片压缩
imagemin: {
dist: {
options: {
optimizationLevel: 3 //定义 PNG 图片优化水平
},
files: [{
expand: true,
cwd: 'img/',
src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
dest: 'img/' // 优化后的图片保存位置，覆盖旧图片，并且不作提示
}]
}
}
});
//加载包含 jshint、concat 和 uglify 任务的插件
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-imagemin');
//默认被执行的任务列表
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', "cssmin"]);
//自定义任务列表
grunt.registerTask('development', ['jshint']);
grunt.registerTask('production', ['concat', 'uglify', 'imagemin', "cssmin"]);
grunt.registerTask('img', ['imagemin']);
};
也可参考如下两个文件。该 Gruntfile.js 文件中的一些配置参数是从 tiny-pubsub.jquery.json 中读取的。
https://github.com/cowboy/jquery-tiny-pubsub/blob/master/Gruntfile.js
https://github.com/cowboy/jquery-tiny-pubsub/blob/master/tiny-pubsub.jquery.json
3. 安装项目依赖的库
进入项目根目录（Gruntfile.js 所在目录），执行命令：
npm install
执行后会在项目根目录下创建 node_modules ，并下载依赖库到该目录。
或者参考 package.json 文件中的依赖配置，逐个安装，参考命令：
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-css –save-dev
npm install grunt-contrib-imagemin –save-dev
4. 执行 grunt
接下来只需要执行 grunt 命令，即会根据 Gruntfile.js 文件配置自动化构建了。
既然是自动化构建，在执行该命令前，项目自然应当已经在开发中了。
当然，也可指定执行 Gruntfile.js 文件配置的某个任务。如：
grunt 或 grunt default
grunt concat
grunt jshint
grunt uglify
grunt development
grunt production
借助大量的插件，你可以使用 grunt 非常方便的简化许多工作。进一步学习请移步官网文档。
5. 相关参考
http://gruntjs.com/
http://www.gruntjs.net/docs/getting-started/
