Grunt簡單應用

Grunt是JavaScript的構建工具，構建工具官方給出的解釋是：對於需要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動完成大部分無聊的工作。

Grunt的使用：

1.安裝CLI（命令行：command lines）

  下載NodeJS（http://nodejs.cn/），然後打開電腦中的命令提示符輸入cmd（window+r），在窗口中輸入node -v，查看當前版本，同時也可以檢測node是否正確安裝。

我們可以使用cnpm替代默認的npm： npm install -g cnpm--registry=https://registry.npm.taobao.org

將CLI加入全局環境中去，這樣可以調用與Gruntfile在同一目錄中 Grunt: cnpm install -g grunt-cli

2.創建package.json文件

package.json放置於項目的根目錄中，與grunt在同一目錄中，並且應該與項目的源代碼一起被提交。在package.json所在目錄中運行cnpm install將依據package.json文件中所列出的每個依賴來自動安裝適當版本的依賴。

{
  "name": "grunt-test",
  "version": "1.0.0",
  "devDependencies": {
    
  }
}

3.安裝grunt

進入網站的根目錄：cd 根目錄名

安裝grunt：在package.json中的“devDependencies”中就會存儲開發依賴項

cnpm install grunt --save-dev

打開package.json文件：

{
  "name": "grunt-test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
  }
}

在根目錄中會出現node_modules文件：存儲grunt源文件的地方

4.配置grunt：例如我們使用uglify插件進行JS代碼壓縮

創建一個src文件夾，在src文件夾下創建一個js文件：test.js做實驗

(function(window,undefined){
	function add(a,b){
		return a+b;
	}
	add(10,100);
})(window);

安裝uglify插件：cnpm install grunt-contrib-uglify --save-dev

新建Gruntfile.js：配置插件

module.exports = function(grunt){
	//任務配置 所有插件的配置信息
	grunt.initConfig({
		//獲取package.json
		pkg:grunt.file.readJSON('package.json'),
		//uglify插件的配置信息
		uglify:{
			options:{
				stripBanners:true,//生成的壓縮文件第一行加一句話說明
				//說明的內容
				banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
			},
			build:{
				src:'src/test.js',//源文件：將test.js壓縮
				dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'//目標文件：壓縮格式以及存放的目錄
			}
		},
	});
	//使用插件
	grunt.loadNpmTasks('grunt-contrib-uglify');
	//在終端輸入grunt時執行的插件
	grunt.registerTask('default',['uglify']);
}

在控制檯輸入：grunt

然後在build文件夾下我們得到一個壓縮後的test.js文件

/*! grunt-test-1.0.0.js 2016-11-18*/
!function(a,b){function c(a,b){return a+b}c(10,100)}(window);

大功告成~~

grunt插件類型有很多，類似以上用法，http://www.gruntjs.net/plugins

• Contrib-jshint——javascript語法錯誤檢查；
• Contrib-watch——實時監控文件變化、調用相應的任務重新執行；
• Contrib-clean——清空文件、文件夾；
• Contrib-uglify——壓縮javascript代碼
• Contrib-copy——複製文件、文件夾
• Contrib-concat——合併多個文件的代碼到一個文件中
• karma——前端自動化測試工具