前言

以現在前端js激增的態勢，一個專案下來幾十個js檔案輕輕鬆鬆
對於複雜一點的單頁應用來說，檔案上百簡直是家常便飯，那麼這個時候我們的js檔案應該怎麼處理呢？
另外，對於css檔案，又該如何處理呢？？
這些都是我們實際工作中要遇到的問題，比如我們現在框架使用zepto、backbone、underscore
我們要如何將他們合成一個libs檔案，這都是令人頭疼的問題

但是grunt的出現卻讓這些事情變得優雅起來！
簡單一鍵，打包結束，尼瑪不是不可能啊！

grunt

是一套前端自動化工具，一個基於nodeJs的命令列工具，一般用於：
① 壓縮檔案
② 合併檔案
③ 簡單語法檢查

對於其他用法，我還不太清楚，我們這裡簡單介紹下grunt的壓縮、合併檔案

初學，有誤請包涵

準備階段

1、nodeJs環境

因為grunt是基於nodeJs的，所以首先各位需要安裝nodeJS環境，這塊我們便不管了
http://www.cnblogs.com/yexiaochai/p/3527418.html

2、安裝grunt

有了nodeJs環境後，我們便可以開始搞grunt了，因為我們可能在任何目錄下執行打包程式，所以我們需要安裝CLI
官方推薦在全域性安裝CLI（grunt的命令列介面）

npm install -g grunt-cli

這條命令將會把grunt命令植入系統路徑，這樣就能在任意目錄執行他，原因是

每次執行grunt時，它都會使用node的require查詢本地是否安裝grunt，如果找到CLI便載入這個本地grunt庫
然後應用我們專案中的GruntFile配置，並執行任務
PS：這段先不要管，安裝完了往下看

例項學習：打包zepto

一些東西說多了都是淚，直接先上例項吧，例項結束後再說其它的
首先在D盤新建一個專案（資料夾就好）
在裡面新增兩個檔案（不要問為什麼，搞進去先）

① package.json

{  "name": "demo",  "file": "zepto",  "version": "0.1.0",  "description": "demo",  "license": "MIT",  "devDependencies": {    "grunt": "~0.4.1",    "grunt-contrib-jshint": "~0.6.3",    "grunt-contrib-uglify": "~0.2.1",    "grunt-contrib-requirejs": "~0.4.1",    "grunt-contrib-copy": "~0.4.1",    "grunt-contrib-clean": "~0.5.0",    "grunt-strip": "~0.2.1"  },  "dependencies": {    "express": "3.x"  }}

② Gruntfile.js

完了我們需要在grunt目錄下執行 npm install將相關的檔案下載下來：

$ cd d:$ cd grunt

然後我們的目錄就會多一點東西：

多了很多東西，先別管事幹什麼的，我們後面都會用到，這個時候在目錄下新建src資料夾，並且搞一個zepto進去

然後在Gruntfile中新增以下程式碼（先別管，增加再說）

module.exports = function (grunt) {  // 專案配置  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    uglify: {      options: {        banner: '/*!   */n'      },      build: {        src: 'src/.js',        dest: 'dest/.min.js'      }    }  });  // 載入提供"uglify"任務的外掛  grunt.loadNpmTasks('grunt-contrib-uglify');  // 預設任務  grunt.registerTask('default', ['uglify']);}

然後執行 grunt命令後

grunt

嗯嗯，多了一個檔案，並且是壓縮的，不差！！！第一步結束

認識Gruntdile與package.json

不出意外，每一個gurnt都會需要這兩個檔案，並且很可能就只有這兩個檔案（複雜的情況有所不同）

package.json

這個檔案用來儲存npm模組的依賴項（比如我們的打包若是依賴requireJS的外掛，這裡就需要配置）
然後，我們會在裡面配置一些不一樣的資訊，比如我們上面的file，這些資料都會放到package中
對於package的靈活配置，我們會在後面提到

Gruntfile

這個檔案尤其關鍵，他一般幹兩件事情：
① 讀取package資訊
② 外掛載入、註冊任務，執行任務（grunt對外的介面全部寫在這裡面）

Gruntfile一般由四個部分組成
① 包裝函式
這個包裝函式沒什麼東西，意思就是我們所有的程式碼必須放到這個函式里面

module.exports = function (grunt) {//你的程式碼}

這個不用知道為什麼，直接將程式碼放入即可

② 專案/任務配置
我們在Gruntfile一般第一個用到的就是initConfig方法配置依賴資訊

pkg: grunt.file.readJSON('package.json')

這裡的 grunt.file.readJSON就會將我們的配置檔案讀出，並且轉換為json物件

然後我們在後面的地方就可以採用pkg.XXX的方式訪問其中的資料了
值得注意的是這裡使用的是underscore模板引擎，所以你在這裡可以寫很多東西

uglify是一個外掛的，我們在package依賴項進行了配置，這個時候我們為系統配置了一個任務
uglify（壓縮），他會幹這幾個事情：

① 在src中找到zepto進行壓縮（具體名字在package中找到）
② 找到dest目錄，沒有就新建，然後將壓縮檔案搞進去
③ 在上面加幾個描述語言

這個任務配置其實就是一個方法介面呼叫，按照規範來就好，暫時不予關注，內幕後期來
這裡只是定義了相關引數，但是並未載入實際函式，所以後面馬上就有一句：

grunt.loadNpmTasks('grunt-contrib-uglify');

用於載入相關外掛

最後註冊一個自定義任務（其實也是預設任務），所以我們下面的命令列是等效的：

grunt == grunt uglify

至此，我們就簡單解析了一番grunt的整個操作，下面來合併檔案的例子

合併檔案

合併檔案依賴於grunt-contrib-concat外掛，所以我們的package依賴項要新增一項

"devDependencies": {  "grunt": "~0.4.1",  "grunt-contrib-jshint": "~0.6.3",  "grunt-contrib-concat": "~0.3.0",  "grunt-contrib-uglify": "~0.2.1",  "grunt-contrib-requirejs": "~0.4.1",  "grunt-contrib-copy": "~0.4.1",  "grunt-contrib-clean": "~0.5.0",  "grunt-strip": "~0.2.1"},

然後再將程式碼寫成這個樣子

module.exports = function (grunt) {  // 專案配置  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    concat: {      options: {        separator: ';'      },      dist: {        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],        dest: 'dest/libs.js'      }    }  });  grunt.loadNpmTasks('grunt-contrib-concat');  // 預設任務  grunt.registerTask('default', ['concat']);}

執行後，神奇的一幕發生了：

三個檔案被壓縮成了一個，但是沒有壓縮，所以，我們這裡再加一步操作，將之壓縮後再合併

module.exports = function (grunt) {  // 專案配置  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    concat: {      options: {        separator: ';'      },      dist: {        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],        dest: 'dest/libs.js'      }    },    uglify: {      build: {        src: 'dest/libs.js',        dest: 'dest/libs.min.js'      }    }  });  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-concat');  // 預設任務  grunt.registerTask('default', ['concat', 'uglify']);}

我這裡的做法是先合併形成一個libs，然後再將libs壓縮成libs.min.js

所以我們這裡換個做法，先壓縮再合併，其實unglify已經幹了這些事情了

module.exports = function (grunt) {  // 專案配置  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    uglify: {      "my_target": {        "files": {          'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']        }      }    }  });  grunt.loadNpmTasks('grunt-contrib-uglify');  // 預設任務  grunt.registerTask('default', ['uglify']);}

所以，我們就暫時不去關注concat了

最後，今天時間不早了，我們最後研究下grunt配合require於是便結束今天的學習吧

合併requireJS管理的檔案

有了前面基礎後，我們來幹一件平時很頭疼的事情，便是將require管理的所有js檔案給壓縮了合併為一個檔案
首先我們建立一個簡單的程式，裡面使用了zepto、backbone、underscore（事實上我並未使用什麼）

在main.js中新增程式碼：

require.config({ baseUrl: '', shim: {  $: {      exports: 'zepto'  },  _: {   exports: '_'  },  B: {   deps: [    '_',    '$'     ],   exports: 'Backbone'  } }, paths: {  '$': 'src/zepto',  '_': 'src/underscore',  'B': 'src/backbone' }});requirejs(['B'], function (b) {});

這樣的話執行會自動載入幾個檔案，我們現在希望將之合併為一個libs.js該怎麼幹呢？？？

我們這裡使用自定義任務方法來做，因為我們好像沒有介紹他

要使用requireJS相關需要外掛 

grunt.loadNpmTasks('grunt-contrib-requirejs');

因為我們以後可能存在配置檔案存在各個專案檔案的情況，所以我們這裡將requireJs相關的配置放入gruntCfg.json中

這樣我們的package.json就沒有什麼實際意義了：

{  "name": "demo",  "version": "0.1.0",  "description": "demo",  "license": "MIT",  "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1"   },  "dependencies": {    "express": "3.x"  }}

我們這裡設定的require相關的grunt配置檔案如下（gruntCfg.json）：

{  "requirejs": {    "main": {      "options": {        "baseUrl": "",        "paths": {          "$": "src/zepto",          "_": "src/underscore",          "B": "src/backbone",          "Test": "src/Test"        },        "web": {          "include": [            "$",            "_",            "B",            "Test"          ],          "out": "dest/libs.js"        }      }    }  }}

這裡我們要打包這些檔案搞到dest的libs.js檔案中，這個檔案照做就行，最後核心程式碼如下：

module.exports = function (grunt) {  grunt.loadNpmTasks('grunt-contrib-requirejs');  //為了介紹自定義任務搞了一個這個  grunt.registerTask('build', 'require demo', function () {    //任務列表    var tasks = ['requirejs'];    //原始碼檔案    var srcDir = 'src';    //目標檔案    var destDir = 'dest';    //設定引數    grunt.config.set('config', {      srcDir: srcDir,      destDir: destDir    });    //設定requireJs的資訊    var taskCfg = grunt.file.readJSON('gruntCfg.json');    var options = taskCfg.requirejs.main.options,        platformCfg = options.web,        includes = platformCfg.include,        paths = options.paths;    var pos = -1;    var requireTask = taskCfg.requirejs;    options.path = paths;    options.out = platformCfg.out;    options.include = includes;    //執行任務    grunt.task.run(tasks);    grunt.config.set("requirejs", requireTask);  });}

搞完了執行就好：grunt build

grunt build

最後發現葉小釵三字，我就放心了，安全！！！！！！

下集預告

1 HTML檔案打包

2 樣式檔案打包

3 移動打包檔案

我們的開發版本與使用版本可能不在一個位置哦

4 分支處理

不同分支打包

5 native包與HTML5包

在HTML5嵌入webview的時代，我們當然存在一次打包既要形成網站檔案也要形成app檔案

6 分頻道打包

當然可能存在分頻道分分支打包的情況

今日到此為止，待續......