grunt初體驗

    最近參與多人團隊項目開發過程之中，使用到了grunt來構建項目，包括一些文件的壓縮，合併等操做。親自動手進行grunt任務的配置，學到了不少東西。現將本身的學習過程記錄以下：

    一、對於一個項目而言，使用grunt構建工具主要依託於兩個文件Gruntfile.js/Gruntfile.coffee以及package.json，其中第一個文件詳細配置了grunt須要執行的任務信息，第二個文件則是每個node項目規範要求的文件，裏面存儲一下有關該項目的環境信息；

    二、Gruntfile.js文件的配置，在項目的初始階段，我僅僅配置了兩個任務，browserify和uglify，其中前者的用途是容許前端人員像開發服務器端node程序同樣，模塊化的開發項目，說白一點，就是該任務可以識別程序中的require等一些列node下的語言，進而對代碼進行組織，使得前端在頁面上直接引用該文件進而處理某些邏輯；後者的做用則是對文件進行壓縮，這對頁面加載性能方面有較大提高；

    三、package.json文件的配置，主要是配置當前項目的詳細信息，以及項目運行的依賴模塊和開發時使用的開發模塊，使用npm install安裝開發模塊以後就能夠在本地進行自由開發。

    下面說一下我這個項目的目錄結構：

    a、主目錄下包括兩個文件夾：build和js，以及兩個js文件：Gruntfile.js和package.json；

    b、使用grunt構建項目，自動將js下的文件編譯到build目錄下，並進行壓縮處理。

    先看一下Gruntfile.js文件的配置：

module.exports=function(grunt){
	grunt.initConfig({
		pkg:grunt.file.readJSON("package.json"),
		build_root:"build",
		js_root:"js",
		browserify:{
			compile:{
				expand:true,
				cwd:"js", //src文件的相對位置
				src:["*.js"],//源文件後綴名
				dest:"build/js",//構建文件所在目錄
				ext:".js"//構建文件的後綴名
			}
		},
		uglify:{
			options:{
				sourceMap:true
			},
			compile:{
				expand:true,
				cwd:"js",
				src:["*.js"],
				dest:"build/js",
				ext:".min.js"
			}
		},
		watch:{
			options:{
				livereload:true
			},
			js:{
				files:['js/*.js'],
				tasks:['browserify:compile','uglify:compile']
			}
		}
	});
	grunt.loadNpmTasks("grunt-contrib-watch");
	grunt.loadNpmTasks("grunt-contrib-uglify");
	grunt.loadNpmTasks("grunt-browserify");

	grunt.registerTask("default",['browserify','uglify']);
};

　　在上述的grunt配置文件中，我主要配置了兩個任務：browserify和uglify，並經過loadNpmTasks加載了模塊任務，通過註冊default任務以後，當運行grunt時，就會自動運行browserify和uglify兩個任務，從而執行對應的操做，注意一點，這兩個任務是順序執行的，即先編譯後壓縮。

     細心的你可能已經注意到了，我額外配置了一個watch任務，該任務的主要功能是監聽配置文件中files的文件變化，當發現文件有變更的時候，自動執行上述兩個任務，從新構建文件。

     package.json文件中的配置信息以下：

{
	"name":"practice",
	"version":"0.0.1",
	"devDependencies":{
		"grunt":"~0.4.1",
		"grunt-browserify": "~1.3.2",
    	        "grunt-contrib-copy": "~0.5.0",
    	        "grunt-contrib-watch": "~0.5.1",
    	        "grunt-contrib-uglify": "~0.4.0"
	}
}

　  舉例：

    一、使用git bash轉到項目目錄下，演示使用的是E盤下的cnblog-test目錄，轉到cnblog-test\js目錄下使用下面命令建立兩個文件

    touch parent.js

    touch child.js

　 二、使用vi打開上面兩個文件 分別輸入下述代碼

//parent.js文件內容
module.exports=function(){
    console.log("i am parent");
};


//child文件內容
var parent=require("./parent");
parent();
console.log("i am child");

 

 　三、運行grunt 就能夠看到在build目錄下已經構建好的文件了 其中child.js文件的內容以下

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var parent=require("./parent");
parent();
console.log("i am child");

},{"./parent":2}],2:[function(require,module,exports){
module.exports=function(){
    console.log("i am parent");
};

},{}]},{},[1])

    該文件便可做爲頁面的引用文件直接執行。

    運行結果以下：

　 i am parent

    i am child

    若是做爲頁面文件引入的話，能夠在console中看到上述相同的效果。

    學習之旅，有諸多不足之處，望多指教！By Ygh1224