grunt

grunt

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

對於其他用法，我還不太清楚，我們這裏簡單介紹下grunt的壓縮、合併文件，初學，有誤請包涵

準備階段

1、nodeJs環境

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

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: '/*! <%= 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命令後

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了