grunt是javascript世界的構建工具，安裝grunt，就是爲了實現項目的“自動化”，減輕前端工作者的負擔。
grunt的官網： http://www.gruntjs.net/
grunt的安裝
一、首先需要安裝node.js（已安裝node.js的跳過此步驟）
（1）到node.js的官網http://nodejs.org/下載.msi程序包，點擊安裝，一直按“下一步”即可。安裝後可在菜單欄看到：
（2）安裝完.msi程序包之後必須重啓電腦，否則無法正確使用命令行界面。（如果不這樣做，您將無法使用節點在命令提示符。想知道爲什麼嗎？您需要刷新Windows，因爲其調整的註冊表文件，誰知道還有什麼在您的計算機上的發動機罩下。）
（3）測試是否安裝成功。
（3.1）首先介紹2個文件夾中打開命令行界面的小技巧：
Windows 小技巧 —— 在文件夾中打開命令提示符
1. 在地址欄裏輸入“CMD”並回車
2. 按住 Shift 鍵然後在文件夾空白處右鍵鼠標，選擇“在此處打開命令窗口”
（3.2）命令行界面中測試。@在任何地方（我在 “D:\Program Files\nodejs\” 下建立）建一個hello.js文件，內容是“console.log('hello,this is nodejs.')”。
@打開命令行界面，進入hello.js文件所在目錄 D:\Program Files\nodejs\ ，輸入node hello.js，可看到輸出“hello,this is nodejs.”。
@亦可以直接輸入命令 node -e "console.log('hello world!')" 測試:
（3.3）建立http服務器。建立一個http.js文件，內容如下，在瀏覽器裏輸入localhost:8000即可輸出“Hello World!”。
var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/html"});
response.write("Hello World!");
response.end();
}).listen(8000);二、現在到安裝grunt.js了。
打開命令行界面，輸入“npm grunt-cli -g”即可。-g是全局的意思，整條指令的意思是把grunt添加到系統環境變量中，然後你就可以在任何目錄中使用grunt了。不用-g，則可以在當前項目中安裝grunt，則此grunt只適用於該項目。
三、在項目中運用grunt.js。
（1）建立項目文件夾grunt-program-1,並在項目文件夾下建立build文件夾用來放置編譯文件。後面的package.json文件和Gruntfile.js文件放在build文件夾下面，目錄結構圖如下：
（2）在項目中添加grunt和插件了。先配置package.json文件（package.json
文件到 build 文件夾下），然後打開命令行界面，切換到項目的文件夾目錄的build下，輸入npm install 即可安裝瞭如package.json配置所寫的grunt v0.4.1以及grunt的插件了。grunt的插件放在build文件夾下的node_modules裏面。
package.json文件的配置如下：
{
"name": "grunt-program-1",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-qunit": "~0.5.2",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-concat": "~0.5.0"
}
}
（3）添加完grunt.js和插件後，就建立Gruntfile.js文件來配置我們的項目。（Gruntfile.js 文件到 build 文件夾下）
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/* 自定義參數 */
meta:{
basePath: '../',
srcPath: '../src/',
distPath: '../dist/',
testPath: '../test/'
},
/* concat 合併js文件 */
concat: {
options: {
// 用於合併文件之間的字符 例如分號";"或者換行符"\n"
separator: '\n',
banner: '/* 這是合併的js ,時間:<%= grunt.template.today("dd-mm-yyyy HH:MM:ss")%> */\n'
},
dist: {
//要合併的js文件
src: ['<%= meta.srcPath %>/**/*.js'],
//合併後的js文件，全部合併爲了app.js
dest: '<%= meta.distPath %>/<%= pkg.name %>.js'
}
},
/* 壓縮文件 */
uglify: {
options: {
// 此處定義的banner註釋將插入到輸出文件的頂部
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy HH:MM:ss") %> */\n'
},
dist: {
files: { // 此處壓縮合並的文件
'<%= meta.distPath %>/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
/* */
qunit: {
files: ['<%= meta.testPath %>/**/*.html']
},
/* */
jshint: {
files: ['Gruntfile.js', '<%= meta.srcPath %>/**/*.js'],
options: {
//這裏是覆蓋JSHint默認配置的選項
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
/* */
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
// 在命令行上輸入"grunt test"，test task就會被執行。
grunt.registerTask('test', ['jshint', 'qunit']);
// 只需在命令行上輸入"grunt"，就會執行default task
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
// 只執行某一個插件功能，則輸入 "grunt 插件名" ， 例如 "grunt concat"
};（4）編譯看看。在build文件夾同一級目錄下建立src文件夾（如上面的目錄結構圖）；寫兩個測試的文件a.js和b.js；在命令行界面輸入grunt concat 則在dist文件下會生成grunt-program-1.js文件；輸入grunt uglify在會生成grunt-program-1.min.js文件。
