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/