自動化構建工具 Grunt

我們在開發過程中經常需要構建（Build），通常構建是一種重複性的工作，例如：編譯 TypeScript 成 ES5、編譯 SASS 成 CSS、合併指令碼樣式、壓縮指令碼和樣式、改變檔案結構、給檔案重新命名等等，這一系列的操作如果專案結構固定後基本是一成不變的操作；它好像是把各種食材（程式碼）倒入到攪拌機，最終經過攪拌機的攪拌成了最終的果汁（部署的程式），如果某種果汁的食譜定型了，攪拌的過程也會固定，這樣只需要設定好相應的步驟就可以完成最終的產物。

當然這種重複性的工作我們都用這種流程化的工具來完成，現在有很多的自動化構建的工具 Grunt、Gulp 等等，這裡主要講的是 Grunt。

什麼是 Grunt

Grunt 是前端世界的構建工具，它依託於 Node.js 的 npm 有著龐大的生態系統，你可以在眾多的外掛中像搭積木一樣完成自己的構建，如果你找不到外掛，也可以自己動手創造一個 Grunt 外掛。

安裝 Grunt

Grunt 和 Grunt 外掛是透過 npm 安裝並管理的。npm 是一個 node 包管理和分發工具，已經成為了非官方的釋出 node 模組（包）的標準。有了 npm ，可以很快的找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。

常用命令

• npm update -g

• npm install -g [model-name]

n 模組

n 模組是用來快速更新 node 版本的模組

• npm install -g n

• n stable 更新到最近的穩定版本

• n v0.10.26 更新到具體版本

nrm 模組

nrm 是一個 NPM 源管理器，允許你快速地在如下 NPM 源間切換

• npm install -g nrm

• nrm ls

• nrm use taobao

• nrm add <registry> <url> [home]

• nrm del <registry>

• nrm test npm

• nrm test

安裝 Grunt-CLI

執行 Grunt 之前需要安裝 Grunt 命令列

• [sudo ]npm install -g grunt-cli

• [sudo ]npm uninstall -g grunt

安裝 Grunt 和 Grunt 外掛

安裝指定外掛並配置到 package.json 中：

[sudo ]npm install [module-name ]--save-dev

安裝 package.json 中的所有外掛：

[sudo ]npm install

初始化 Grunt 專案（Gruntfile.js）

[sudo ]npm init

使用

建立 Grunt 專案

//Gruntfile.jsmoule.exports = function(grunt) {    require('load-grunt-tasks')(grunt);    require('time-grunt')(grunt);

    grunt.initConfig({        //codes......
    });
}

建立一個複製任務

//Gruntfile.jsmoule.exports = function(grunt) {    //codes......

    grunt.initConfig({        copy: {            taskA: {                src: 'a.html',                dist: 'dist/a.html'
            },            taskB: {                src: ['b.html', 'b1.html'],                dist: 'dist/b.html'
            }
        }
    });
}

執行任務

透過命令列進入到 Gruntfile.js 檔案目錄，執行grunt TaskName來執行對應的命令，例如執行上面的複製命令：

grunt copy:taskA

Grunt 常用外掛

• Js 檔案校驗：grunt-contrib-jshint

• 檔案複製：grunt-contrib-copy

• 檔案刪除：grunt-contrib-clean

• 檔案合併：grunt-contrib-concat

• Sass 解析：grunt-contrib-sass

• Css 壓縮：grunt-contrib-cssmin

• Html 壓縮：grunt-contrib-htmlmin

• Js 壓縮混淆：grunt-contrib-uglify

• 靜態資原始檔模版：grunt-usemin

• 靜態資原始檔版本：grunt-rev

• 任務執行時間外掛：time-grunt

• 載入 Grunt 外掛：load-grunt-tasks

• 自動新增樣式字首：grunt-autoprefixer

• ...

整合到 Sublime

配置 Sublime 的 Build System Tools > Build System > New Build System Grunt.sublime.build

{
    "cmd": ["grunt", "--no-color”, “build"],
     "path": "/bin:/usr/bin:/usr/local/bin",
     "working_dir": "${project_path:${folder}}",
     "selector": ["Gruntfile.js"]
}