grunt 自動化之壓縮javascript代碼

遇到的問題

說grunt以前，先來講說開發中遇到的問題。

1. 壓縮代碼很麻煩

若是不使用自動化工具，壓縮代碼通常使用在線工具。將本地代碼拷到網頁中，壓縮，而後再拷貝回本地。若是文件很少，還能夠忍受。可是實際開發中文件確定是少不了的。更使人抓狂的是，若是文件頻繁的修改，那就須要不斷的複製粘貼。。
此外不一樣的在線工具，壓縮代碼標準是不同的。有的在線工具只是去掉註釋、換行符；有的在線工具使用的Uglify壓縮；有的在線工具使用的是Yui壓縮... 不一樣的壓縮天然生成的文件不同。每一個人使用的壓縮工具都不同，開發中必定會遇到問題。

2. 壓縮以後的代碼沒法調試

壓縮代碼，天然是爲了減小文件大小，提升網站的訪問速度。可是壓縮以後的代碼根本無法閱讀，給開發帶來了很多困難。尤爲是若是使用相似Uglify這種壓縮方式的工具，壓縮以後的代碼變量名都會被修改爲a、b、c、d了，想調試，徹底不可能。

開發應該是件很easy的事情。以上問題不光是我會遇到，確定有很多人會遇到，那麼就必定會有牛人解決了這些問題。grunt就能夠解決上面這些簡單事情。

grunt

關於Grunt的簡介，官網上面很詳細。此外還有Grunt中文網。
爲了解決上面的兩個問題，須要使用到Grunt的兩個插件

• grunt-contrib-concat 合併js代碼
• grunt-contrib-uglify 壓縮js代碼，並生成source map文件

安裝node

要想使用grunt，必需要安裝node。由於grunt中的插件都是使用npm來安裝並管理的。So~ 安裝node。從Node.js官網上下一個windows版本的node.js，而後安裝到本地。安裝完成後，要確保本身的環境變量中有node.exe的路徑。而後打開命令提示符，輸入node，就進入到node.js交互模式下了。說明node已經安裝成功了。

C:\Users\Administrator>node
> console.log("Hello World");
Hello World
undefined
>

安裝grunt

在命令提示符下，運行npm install -g grunt-cli，這條命令就會將grunt命令植入到系統路徑，而後在任意目錄下就能夠運行grunt了。

配置grunt

要想讓grunt自動幹活，還得寫點配置文件。package.json和Gruntfile.js。

package.json文件就是告訴grunt須要使用哪些插件，例如這裏咱們就須要使用grunt-contrib-concat和grunt-contrib-uglify這兩個插件。
Gruntfile.js是告訴每一個插件具體應該如何幹活的。例如哪幾個文件須要合併，那個文件須要壓縮，壓縮以後生成的文件路徑等等。

package.json

package.json文件以下

{
  "name": "my-project-name",        // 項目名稱
  "version": "0.1.0",               // 項目版本
  "devDependencies": {
    "grunt": "~0.4.5",              // 使用grunt；版本是0.4.5
    "grunt-contrib-concat": "~0.5.1",   // 使用concat；版本是0.5.1
    "grunt-contrib-uglify": "~0.9.1"   // 使用uglify；版本是0.9.1
  }
}

文件的配置很簡單，就是在package.json中配置上項目中須要使用哪些插件，以及插件的版本。

找插件的方法也很簡單，在plugins中有一個列表，這裏頭包括了全部可使用的插件。將須要使用的插件名稱、版本號添加到package.json中便可。

若是列表前面有"contrib"字樣的，說明該插件是由官網維護的。例如grunt-contrib-concat就是官方維護的。
那麼該如何知道該插件的版本號呢？經過列表點到插件的詳情頁中，在每一個插件的右側都會有該插件的最新版本號。例如0.5.1 is the latest of 11 releases，那麼0.5.1就是最新的版本號了。

添加完package.json以後，咱們須要下載一下插件。既然咱們要使用concat和uglify這兩個插件，沒有代碼可不行。因此必須下載下來。

在項目目錄中命令提示符下，執行npm install，而後稍等片刻，咱們所須要的插件就全都下載好了。在你的目錄下會多出一個node_modules文件夾，這個文件夾中就是上面配置的三個插件grunt、concat、uglify。

Gruntfile.js

Gruntfile.js文件以下

module.exports = function(grunt) {

  // 項目配置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),   // grunt會讀取package.json中的文件信息
    concat : {      // concat插件的配置信息
       test_grunt : {   // 名稱而已~
         files : {  // 將source目錄下doT.js和common.js合併成tmp.js，並保存到dist目錄下
           'dist/tmp.js': ['source/doT.js','source/common.js']
         }
       }
     },
     uglify: {  // uglify插件的配置信息
       test_grunt : {   // 名稱而已~
          options: {
            sourceMap: true // 容許自動生成source map文件
          },
         files : {  // 將tmp.js壓縮成tmp.min.js
           'dist/tmp.min.js' : 'dist/tmp.js'
         }
       }
     }
  });

  // 加載插件
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 執行任務，任務名稱是default
  grunt.registerTask('default', ['concat','uglify']);

};

就是告訴concat將哪些文件合併，告訴uglify將哪些文件進行壓縮，是否生成source map。更高級的配置方法能夠從插件的詳情中找到：concat、uglify。將上面的文件都配置完以後，運行grunt命令，而後稍等片刻，能夠看到以下信息

e:\work\web\demo\grunt>grunt
Running "concat:test_grunt" (concat) task
File dist/tmp.js created.

Running "uglify:test_grunt" (uglify) task
>> 1 sourcemap created.
>> 1 file created.

Done, without errors.

生成的文件

最後咱們再來看下生成的文件吧。

dist文件夾下是壓縮以後的代碼
node_modules文件夾下是經過package.json配置生成的插件
source文件夾下是未壓縮的代碼

dist文件夾下內容以下

tmp.js是將doT.js和common.js合併以後的文件
tmp.min.js是將tmp.js壓縮以後的文件
tmp.min.js.map是生成的source map文件

source map

source map就是一個信息文件，經過這個信息文件，可讓壓縮後的.min.js文件找到與之對應的未壓縮的.js文件。調試的時候直接使用未壓縮的文件。

開啓source map的方法也很簡單，在Chrome瀏覽器中F12開啓開發者工具，打開Setting面板，找到Sources，其中有個Enable JavaScript source maps選項，勾選上就能夠了(PS:Chrome版本是39以後的)。而後在Sources標籤下，就會發現多加載了個js文件。

關於Source map的詳解，直接看吧~

如何在Chrome下使用Source map，谷歌已經給出了詳細方法：Chrome using Source Maps
此外有不少語言支持source map，也有不少工具支持source map，甚至包括css也支持source map。已經有人整理出來一份列表了Source maps

總結

使用了grunt以後壓縮代碼、調試壓縮代碼，就很方便了~固然若是你不想配置node和grunt環境，寧願使用在線工具，也是能夠的~

grunt並不僅是能夠用來壓縮代碼。實際上對於須要返回重複的任務，如壓縮、編譯、單元測試等，使用grunt均可以自動話解決。

補充一篇文章：grunt整合版