前言：
有一天，老大興爺遇見我說，要給我一個艱巨的任務(wù) (?￣?￣)
阿西巴的讓我總結(jié) Sails 中的 Grunt 工作流... 這這這咋寫呢，沒法寫啊，難不成把文檔用人話講一遍.

建議感興趣的人還是看看 Sails 的文檔，實踐實踐就有感覺了.
看我寫的，我只能讓你覺得「講的真有道理！」

什么才是好的 Grunt 工作流？

Grunt 工作流的核心就是「自動化」，自動化的替你解決繁瑣重復(fù)性的工作，比如前端經(jīng)常需要使用的驗證、編譯、合并、壓縮，甚至是部署、以及數(shù)據(jù)庫遷移等等.

好的 Grunt 工作流，保持其核心「自動化」的同時也不失靈活，既能面對開發(fā)模式，也能應(yīng)付產(chǎn)品模式. 本文要介紹的 Sails 框架自身的 Grunt 工作流就是如此，輕巧靈活，能解決多種場景下的需求.

使用場景

一般前端自動化工作流，無非解決兩個基本問題，開發(fā)模式和產(chǎn)品模式所對應(yīng)的自動化工作流.

以本文介紹的 Grunt 工作流為例
開發(fā)模式下，運行 grunt default , 將 .tmp/ 下的內(nèi)容清空，編譯 less 和 coffeeScript 文件后，復(fù)制 assets/ 下的所有目錄和文件，除了 coffeeScript 和 less 文件，放置在 .tmp/public/. 然后將 .tmp/public/ 下的 css 和 javaScript 注入含有 或 標(biāo)簽的頁面.

產(chǎn)品模式下，運行 grunt buildProd, 將 www 下的內(nèi)容清除，編譯、合并、壓縮 .tmp/public/ 下的資源，將其復(fù)制至 www 中. 然后將 www 下的 css 和 javaScript 注入含有 或 標(biāo)簽的頁面.

Grunt 工作流的文件目錄

• assets: 一般放置開發(fā)原始文件，比如 .less 和 .coffee
• .tmp/public: 一般放置經(jīng)過自動化處理的文件（開發(fā)模式），比如 .css 和 .js
• www: 一般放置經(jīng)過自動化處理的文件（產(chǎn)品模式），比如 .min.css 和 .min.js
• tasks/config: 放置基本的自動化任務(wù)，比如 clean、coffee、less 等等
• tasks/register: 放置自動化任務(wù)集合, 比如 default 分別調(diào) compileAssets, linkAssets, 'watch
• tasks/pipeline.js: 控制 assets/ 下的 css 和 javaScript 是否被編譯和注入頁面以及順序

Grunt 工作流的文件目錄

Grunt 工作流中的任務(wù)說明

• **靈活且全面的任務(wù)配置 **

  • clean

  清除 .tmp/public 和 www 中的內(nèi)容.

  • less

  將 assets/styles/importer.less 編譯.

  • coffee

  將 assets/js/ 中的 coffeeScript 編輯成 javaScript 并放置在 .tmp/publick/js/.

  • concat

  將 css 和 javaScript 文件合并，放置在 .tmp/public/concat/.

  • cssmin

  將 .tmp/public/concat/ 中的 css 文件壓縮，放置在 .tmp/public/min/ 中.

  • uglify

  將 .tmp/public/concat/ 中的 javaScript 文件壓縮，放置在 .tmp/public/min/ 中.

  • copy

  開發(fā)模式下，復(fù)制 assets/ 下的所有目錄和文件，除了 coffeeScript 和 less 文件，放置在 .tmp/public/.
  產(chǎn)品模式下，復(fù)制 .tmp/public/ 下的所有目錄和文件，放置在 www 中.

  • sails-linker

  sails-linker 是令人容易迷惑的概念，但本質(zhì)很簡單. 就是將 .tmp/public/ 或 .tmp/public/min/下的 css 和 javaScript 按開發(fā)或產(chǎn)品模式注入含有 或 標(biāo)簽的頁面.

  • sync

  功能非常類似 copy，但不同的地方是，它只將發(fā)生的改變的文件從 assets/ 復(fù)制至 .tmp/public/， 覆蓋原本的文件.

  • watch

  當(dāng) assets/ 內(nèi)容發(fā)生改變的時候，將會自動運行 syncAssets 和 linkAssets 任務(wù)集合（待會介紹），你可以即時的看到內(nèi)容改變后的效果，無需再次手動啟動 grunt 任務(wù).

• 不同場景下的任務(wù)集合

  • compileAssets

  分別調(diào)用clean, less, coffee, copy任務(wù)的開發(fā)模式，將 .tmp/public/ 清空，編譯 less 和 coffeeScript 文件后，復(fù)制 assets/ 下的所有目錄和文件，除了 coffeeScript 和 less 文件，放置在 .tmp/public/.

  • linkAssets

  分別調(diào)用 sails-linker:devJs, sails-linker:devStyles，將 .tmp/public/ 下的 css 和 javaScript 注入含有 或 標(biāo)簽的頁面.

  • default (開發(fā)模式)

  分別調(diào)用 compileAssets, linkAssets, 'watch

  • buildProd （產(chǎn)品模式）

  分別調(diào)用 clean:build, compileAssets, concat, uglify, cssmin, copy:build，將 www下的內(nèi)容清除，編譯、合并、壓縮 .tmp/public/ 下的資源，將其復(fù)制至 www 中. 然后調(diào)用 linkAssetsBuildProd，將 www 下的 css 和 javaScript 注入含有 或 標(biāo)簽的頁面.

剩余的內(nèi)容以此類推，看看 Sails 文檔即可.