实用 Grunt Workflow

前言：
有一天，老大兴爷遇见我说，要给我一个艰巨的任务 (๑￣∀￣)
阿西巴的让我总结 Sails 中的 Grunt 工作流... 这这这咋写呢，没法写啊，难不成把文档用人话讲一遍.

建议感兴趣的人还是看看 Sails 的文档，实践实践就有感觉了.
看我写的，我只能让你觉得「讲的真有道理！」

什么才是好的 Grunt 工作流？

Grunt 工作流的核心就是「自动化」，自动化的替你解决繁琐重复性的工作，比如前端经常需要使用的验证、编译、合并、压缩，甚至是部署、以及数据库迁移等等.

好的 Grunt 工作流，保持其核心「自动化」的同时也不失灵活，既能面对开发模式，也能应付产品模式. 本文要介绍的 Sails 框架自身的 Grunt 工作流就是如此，轻巧灵活，能解决多种场景下的需求.

使用场景

一般前端自动化工作流，无非解决两个基本问题，开发模式和产品模式所对应的自动化工作流.

以本文介绍的 Grunt 工作流为例
开发模式下，运行 grunt default , 将 .tmp/ 下的内容清空，编译 less 和 coffeeScript 文件后，复制 assets/ 下的所有目录和文件，除了 coffeeScript 和 less 文件，放置在 .tmp/public/. 然后将 .tmp/public/ 下的 css 和 javaScript 注入含有 或 标签的页面.

产品模式下，运行 grunt buildProd, 将 www 下的内容清除，编译、合并、压缩 .tmp/public/ 下的资源，将其复制至 www 中. 然后将 www 下的 css 和 javaScript 注入含有 或 标签的页面.

Grunt 工作流的文件目录

• assets: 一般放置开发原始文件，比如 .less 和 .coffee
• .tmp/public: 一般放置经过自动化处理的文件（开发模式），比如 .css 和 .js
• www: 一般放置经过自动化处理的文件（产品模式），比如 .min.css 和 .min.js
• tasks/config: 放置基本的自动化任务，比如 clean、coffee、less 等等
• tasks/register: 放置自动化任务集合, 比如 default 分别调 compileAssets, linkAssets, 'watch
• tasks/pipeline.js: 控制 assets/ 下的 css 和 javaScript 是否被编译和注入页面以及顺序

Grunt 工作流的文件目录

Grunt 工作流中的任务说明

• **灵活且全面的任务配置 **

  • clean

  清除 .tmp/public 和 www 中的内容.

  • 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

  开发模式下，复制 assets/ 下的所有目录和文件，除了 coffeeScript 和 less 文件，放置在 .tmp/public/.
  产品模式下，复制 .tmp/public/ 下的所有目录和文件，放置在 www 中.

  • sails-linker

  sails-linker 是令人容易迷惑的概念，但本质很简单. 就是将 .tmp/public/ 或 .tmp/public/min/下的 css 和 javaScript 按开发或产品模式注入含有 或 标签的页面.

  • sync

  功能非常类似 copy，但不同的地方是，它只将发生的改变的文件从 assets/ 复制至 .tmp/public/， 覆盖原本的文件.

  • watch

  当 assets/ 内容发生改变的时候，将会自动运行 syncAssets 和 linkAssets 任务集合（待会介绍），你可以即时的看到内容改变后的效果，无需再次手动启动 grunt 任务.

• 不同场景下的任务集合

  • compileAssets

  分别调用clean, less, coffee, copy任务的开发模式，将 .tmp/public/ 清空，编译 less 和 coffeeScript 文件后，复制 assets/ 下的所有目录和文件，除了 coffeeScript 和 less 文件，放置在 .tmp/public/.

  • linkAssets

  分别调用 sails-linker:devJs, sails-linker:devStyles，将 .tmp/public/ 下的 css 和 javaScript 注入含有 或 标签的页面.

  • default (开发模式)

  分别调用 compileAssets, linkAssets, 'watch

  • buildProd （产品模式）

  分别调用 clean:build, compileAssets, concat, uglify, cssmin, copy:build，将 www下的内容清除，编译、合并、压缩 .tmp/public/ 下的资源，将其复制至 www 中. 然后调用 linkAssetsBuildProd，将 www 下的 css 和 javaScript 注入含有 或 标签的页面.

剩余的内容以此类推，看看 Sails 文档即可.