30分鐘學會使用grunt打包前端代碼(一)

grunt

是一套前端自動化工具，一個基于nodeJs的指令行工具，一般用于：

① 壓縮檔案

② 合并檔案

③ 簡單文法檢查

對于其他用法，我還不太清楚，我們這裡簡單介紹下grunt的壓縮、合并檔案，初學，有誤請包涵

準備階段

1、nodeJs環境

因為grunt是基于nodeJs的，是以首先各位需要安裝nodeJS環境，這塊我們便不管了

http://www.cnblogs.com/yexiaochai/p/3527418.html

2、安裝grunt

有了nodeJs環境後，我們便可以開始搞grunt了，因為我們可能在任何目錄下運作打包程式，是以我們需要安裝CLI

官方推薦在全局安裝CLI（grunt的指令行接口）

這條指令将會把grunt指令植入系統路徑，這樣就能在任意目錄運作他，原因是

每次運作grunt時，它都會使用node的require查找本地是否安裝grunt，如果找到CLI便加載這個本地grunt庫

然後應用我們項目中的GruntFile配置，并執行任務

PS：這段先不要管，安裝完了往下看

執行個體學習：打包zepto

一些東西說多了都是淚，直接先上執行個體吧，執行個體結束後再說其它的

首先在D盤建立一個項目（檔案夾就好）

在裡面新增兩個檔案（不要問為什麼，搞進去先

{
  "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: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%=pkg.file %>.js',
        dest: 'dest/<%= pkg.file %>.min.js'
      }
    }
  });
  // 加載提供"uglify"任務的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 預設任務
  grunt.registerTask('default', ['uglify']);
}
           

然後運作 grunt指令後

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

認識Gruntfile與package.json

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

package.json

這個檔案用來存儲npm子產品的依賴項（比如我們的打包若是依賴requireJS的插件，這裡就需要配置）

然後，我們會在裡面配置一些不一樣的資訊，比如我們上面的file，這些資料都會放到package中

對于package的靈活配置，我們會在後面提到

*

Gruntfile

這個檔案尤其關鍵，他一般幹兩件事情：

① 讀取package資訊

② 插件加載、注冊任務，運作任務（grunt對外的接口全部寫在這裡面）

Gruntfile一般由四個部分組成

① 包裝函數

這個包裝函數沒什麼東西，意思就是我們所有的代碼必須放到這個函數裡面

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

這個不用知道為什麼，直接将代碼放入即可

② 項目/任務配置

我們在Gruntfile一般第一個用到的就是initConfig方法配置依賴資訊

這裡的 grunt.file.readJSON就會将我們的配置檔案讀出，并且轉換為json對象

然後我們在後面的地方就可以采用pkg.XXX的方式通路其中的資料了

值得注意的是這裡使用的是underscore模闆引擎，是以你在這裡可以寫很多東西

uglify是一個插件的，我們在package依賴項進行了配置，這個時候我們為系統配置了一個任務

uglify（壓縮），他會幹這幾個事情：

① 在src中找到zepto進行壓縮（具體名字在package中找到）

② 找到dest目錄，沒有就建立，然後将壓縮檔案搞進去

③ 在上面加幾個描述語言

這個任務配置其實就是一個方法接口調用，按照規範來就好，暫時不予關注，内幕後期來

這裡隻是定義了相關參數，但是并未加載實際函數，是以後面馬上就有一句：

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

用于加載相關插件

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

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