使用GRUNT壓縮和合並js文件

目標

Grunt是一個簡單好用的js文件壓縮和合並工具，當一個頁面須要加載過個js文件時，合併多個js文件能夠減小http請求次數，提升頁面加載速度。另外，Grunt的uglify功能能夠起到混淆和隱藏js代碼邏輯做用。

安裝nodejs和Grunt命令行

Grunt運行nodejs環境中，經過npm進行安裝。Grunt 0.4.x 須要Node.js 版本 >= 0.8.0。
nodejs的安裝這裏再也不贅述，能夠根據使用的操做系統選擇合適的方式進行安裝。例如在Centos系統下能夠用以下命令安裝：

yum install -y nodejs

更新npm到最新版本：

npm update -g npm

而後安裝Grunt命令行環境

npm install -g grunt-cli

配置Grunt工程環境

一個Grunt工程環境就是Grunt要在其中工做的目錄，配置完畢後能夠對該目錄下的js進行壓縮和合並。
假設咱們的工程目錄結構以下：

./
  ./js
  ./dist

./ 爲咱們的而工程根目錄
js 目錄下存放須要壓縮合並的js文件
dist 目錄存放咱們稍後合併輸出的文件。

在工程根目錄下放置兩個文件： package.json 和 Gruntfile.js。
這是兩個必要的文件，也是最重要和容易出錯的環節，必定要記着將你最新編輯的文件放置到工程根目錄下。

package.json用於定義工程的名稱、版本和因此來的Grunt插件信息，內容以下：

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

name 和 version能夠根據實際狀況定義，其餘原樣保留。
編輯完package.json後，在工程根目錄下運行命令：

npm install grunt --save-dev

這個命令的目的是安裝最新的Grunt命令，並安裝package.json中定義的依賴信息。

而後編輯Gruntfile.js 文件，這個文件定義Grunt工做的全部任務細節，格式以下：

module.exports = function(grunt) {

 //工程配置：輸入、輸出、選項等
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'js/*.js',
        dest: 'dist/output.min.js'
      }
    }
  });

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

  // 任務,能夠是多項，這裏只對代碼進行壓縮
  grunt.registerTask('default', ['uglify']);

};

uglify 代碼壓縮任務入口，能夠並行執行多向任務，此文檔僅僅演示代碼壓縮合並。
src 輸入文件，支持使用通配符、正則表達式或文件列表，*.js表示壓縮合並全部js文件。
dest 壓縮後的文件輸出位置。

執行Grunt命令

以上工做準備完畢後，在工程根目錄下執行Grunt命令：

grunt

若是沒有錯誤，將輸出壓縮結果文件。
有時候會出現缺乏某些插件的錯誤，根據錯誤提示安裝便可。例如出現：

Local Npm module "grunt-contrib-uglify" not found. Is it installed?

根據提示安裝便可：

npm install grunt-contrib-uglify

...

---

By 雲視睿博王工，轉載請註明出處。