前端自動化構建工具Grunt

1、瞭解Gurnt（http://www.open-open.com/lib/view/open1433898272036.html）

Grunt 是一個基於任務的JavaScript工程命令行構建工具。
Grunt和Grunt插件，是經過npm安裝並管理的，npm是Node.js的包管理器。
瞭解Grunt前，首先要準備兩件事：
一、瞭解npm（Node Package Manager）：npm是一個NodeJS包管理和分發工具，已經成爲了非官方的發佈Node模塊（包）的標準。
二、安裝node：進入nodejs官網（https://nodejs.org/），單擊INSTALL下載node安裝包，默認安裝。安裝完成後，進入對應目錄，會發現nodejs文件夾下面有npm,直接用npm安裝相環境既可。

2、安裝Grunt

參考Grunt官網http://www.gruntjs.net/
安裝Grunt：npm install -g grunt-cli
注意，安裝grunt-cli並不等於安裝了Grunt！Grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，容許你在同一個系統上同時安裝多個版本的Grunt。

3、簡單實用Grunt

一個新的Grunt項目，必須在根目錄下要有兩個文件：package.json 和 Gruntfile.js
package.json: 此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊。你能夠在此文件中列出項目依賴的grunt和Grunt插件，放置於devDependencies配置段內。
Gruntfile: 此文件被命名爲 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）並加載Grunt插件的。
1. npm init命令會建立一個基本的package.json文件。或者手動建立，以下：

{
  "name": "my-project-name",
  "description":"test grunt ...",
  "version": "0.1.0"
}

2. 安裝Grunt和Grunt插件（https://github.com/gruntjs）
向已經存在的package.json 文件中添加Grunt和grunt插件的最簡單方式是經過：
npm install <module> --save-dev。此命令不光安裝了<module>，還會自動將其添加到devDependencies 配置段中。
3. grunt --help 命令將列出全部可用的任務

4、簡單項目流程示例

清空編譯工做區 -> copy源文件到編譯工做區 -> 合併文件 -> 壓縮文件 -> 加時間戳
clean -> copy -> concat -> min -> md5 
1. grunt-contrib-clean：Clear files and folders.
2. grunt-contrib-copy：Copy files and folders.
3. grunt-contrib-concat：Concatenate files.
4. grunt-contrib-cssmin：Compress CSS files.
   grunt-contrib-uglify：Minify files with UglifyJS.
   grunt-contrib-htmlmin：Minify HTML.
5. grunt-filerev：Static asset revisioning through file content hash
第一步：建立package.json

{
	"name":"test_grunt",
	"description":"test grunt ...",
	"version":"0.0.1"
}

第二步：安裝對應插件（加上--save-dev，會在package.json中加上devDependencies依賴）

npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-uglify --save-dev

第三步：建立Gruntfile.js，添加要使用插件配置

'use strict';
module.exports = function(grunt) {
	// 構建的初始化配置
	grunt.initConfig({
		//配置具體任務
	});


	// 載入要使用的插件
	grunt.loadNpmTasks('grunt-contrib-clean');


	// 註冊剛配置好的任務
	grunt.registerTask('default', ['clean']);
}

5、地址

nodejs官網地址：https://nodejs.org/
grunt中文官網地址：http://www.gruntjs.net/
grunt官網插件地址：https://github.com/gruntjs
6、源碼
// package.json

{
  	"name": "test_grunt",
  	"description": "test grunt ...",
  	"version": "0.0.1",
  	"devDependencies": {
	    "grunt": "^0.4.5",
	    "grunt-contrib-clean": "^0.6.0",
	    "grunt-contrib-concat": "^0.5.1",
	    "grunt-contrib-copy": "^0.8.0",
	    "grunt-contrib-cssmin": "^0.12.3",
	    "grunt-contrib-uglify": "^0.9.1"
  	}
}


//Gruntfile.js

'use strict';
module.exports = function(grunt) {
  	// 構建的初始化配置
  	grunt.initConfig({
  		/* 配置具體任務 */
  		pkg: grunt.file.readJSON('package.json'),
  		dirs: {
			src: 'path',
			dest: 'dest/<%= pkg.name %>/<%= pkg.version %>',
		},
  		// clean任務（刪除dest/test_grunt/0.0.1 目錄下非min的文件）
		clean: {
			js: ["<%= dirs.dest %>/*.js", "!<%= dirs.dest %>/*.min.js"],
			css: ["<%= dirs.dest %>/*.css", "!<%= dirs.dest %>/*.min.css"]
		},
		// copy任務（拷貝path目錄下的文件到dest目錄）
		copy: {
			main: {
			    files: [
			      // includes files within path
			      {expand: true, src: ['path/*'], dest: '<%= dirs.dest %>/', filter: 'isFile'},
			    ]
			}
		},
		// concat任務（將dest目錄下的a.js和b.js合併爲built.js）
		concat: {
		    options: {
		      	separator: '\n',
		    },
		    concatCSS: {
		      	src: ['<%= dirs.dest %>/a.css', '<%= dirs.dest %>/path/b.css'],
		      	dest: '<%= dirs.dest %>/built.css',
		    },
		    concatJS: {
		      	src: ['<%= dirs.dest %>/a.js', '<%= dirs.dest %>/b.js'],
		      	dest: '<%= dirs.dest %>/built.js',
		    }
		},
		// cssmin任務（壓縮css）
		cssmin: {
		  	target: {
			    files: [{
			      	expand: true,
			      	cwd: '<%= dirs.dest %>',
			      	src: ['*.css', '!*.min.css'],
			      	dest: '<%= dirs.dest %>',
			      	ext: '.min.css'
			    }]
		  	}
		},
		// uglify任務（壓縮js）
		uglify: {
		    options: {
		      	mangle: {
		        	except: ['jQuery', 'Backbone']
		      	}
		    },
		    my_target: {
		      	files: {
		        	'<%= dirs.dest %>/bulit.min.js': ['<%= dirs.dest %>/*.js']
		      	}
		    }
		}
  	});

  	// 載入要使用的插件
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-copy');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.loadNpmTasks('grunt-contrib-uglify');

	// 註冊剛配置好的任務
	grunt.registerTask('cls', ['clean']);
	grunt.registerTask('cpy', ['copy']);
	grunt.registerTask('con', ['concat']);
	grunt.registerTask('cmpCSS', ['cssmin']);
	grunt.registerTask('cmpJS', ['uglify']);

	grunt.registerTask('default', ['copy','concat','cssmin','uglify','clean']);
}

PS：
1.  本身配置的任務名稱，不能和插件名稱同樣，不然會形成無限循環

2.  插件名稱，除最外層外，中間層名稱可自定義