Ian 20150515 grunt

1. GruntJS
2015.05.15 By Ian.

2. JavaScript Build System
 Npm
 Grunt
 Gulp

3. The Good Parts
 Grunt有一個完善的社群，即使是在Windows上
 它不僅僅應用在Node社群
 它簡單易學，你可以隨便安裝插件並配置它們
 你不需要多先進的理念，也不需要任何經驗

4. Installing the CLI
 Grunt's command line interface
 npm install -g grunt-cli
 The job of the Grunt CLI is simple: run the version of Grunt
which has been installed next to a Gruntfile.

5. Preparing a new Grunt project
 package.json: This file is used by npm to store metadata
for projects published as npm modules. You will list grunt
and the Grunt plugins your project needs as
devDependencies in this file.
 Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee
and is used to configure or define tasks and load Grunt
plugins.

6. Installing Grunt and gruntplugins
 Install the latest version of Grunt in your project folder,
adding it to your devDependencies:
 npm install grunt --save-dev
 Install Task module
 npm install grunt-contrib-jshint --save-dev

7. The Gruntfile
A Gruntfile is comprised of the following parts:
 The "wrapper" function
 Project and task configuration
 Loading Grunt plugins and tasks
 Custom tasks

8. An example Gruntfile

9. Loading Grunt plugins and tasks
 Load the plugin that provides the "uglify" task.
 grunt.loadNpmTasks('grunt-contrib-uglify');

10. Custom tasks
 // Default task(s).
 grunt.registerTask('default', ['uglify']);
 // A very basic default task.
 grunt.registerTask('default', 'Log some stuff.', function() {
 grunt.log.write('Logging some stuff...').ok();
 });

11. Plugin
 http://gruntjs.com/plugins
 grunt-contrib-clean: 用於清理指定文件（夾），一般是構建
之前或之後進行
 grunt-contrib-coffee: 將CoffeeScript編譯為JavaScript
 grunt-contrib-compass: 使用Compass工具生成CSS文件
 grunt-contrib-concat: 連接文件，減少HTTP請求
 grunt-contrib-copy: 複製文件（夾）

12. Plugin
 grunt-contrib-jshint:
 grunt-contrib-watch: 監視文件，一旦更改就會重新運行指定
的任務，例如使http服務器重新加載源文件
 grunt-contrib-ugligy: 壓縮JS文件，提高運行時性能
 grunt-contrib-less grunt-contrib-sass grunt-contrib-
compass
 grunt-ts

13. The Bad Parts
 缺點1.：複雜的編繹過程，它可能會變得過於冗長。當開發一段
時間以後，它往往很難將編繹過程作為一個整體。一旦你編繹
流程任務到達兩位數，幾乎可以保證，你會發現自己不得不在
多個目標(Targets)中跑同一個Task
 缺點2.需要為每個任務（或者每個編繹流）編寫一份獨立的配置
文件
 缺點3.Grunt的最大缺點之一就是它的I/O限制。這意味著大多
數Grunt的任務將從硬碟中讀取，再寫入到硬碟。如果你的多個
任務需要操作同一個文件，那麼該文件很有可能被從硬碟中多
次讀取。

14. 將npm視為構建工具
 {
 "scripts": {
 "test": "jshint . --exclude node_modules"
 },
 "devDependencies": {
 "jshint": "^2.5.1"
 }
 }
 npm run test

15. npm
 {
 "scripts": {
 "lint": "jshint . --exclude node_modules",
 "unit": "tape test/*",
 "test": "npm run lint && npm run unit"
 },
 "devDependencies": {
 "jshint": "^2.5.1",
 "tape": "~2.10.2"
 }
 }

16. With Bash cmd
 {
 "scripts": {
 "build-js": "cp -r src/js/vendor bin/js",
 "build-css": "stylus src/css/all.styl -o bin/css",
 "build": "npm run build-js & npm run build-css"
 },
 "devDependencies": {
 "stylus": "^0.45.0"
 }
 }

17.  可以利用NPM的所有優勢，它有數以萬計的 Module 可以選擇。
除了NPM，你不需要任何額外的命令行工具(CLI)或文件，你只
需要在package.json添加依賴關係。
 也許NPM的最大的缺點是，在Windows環境中的應用可能沒那
麼好。

18. Reference
 http://modernweb.com/2014/08/04/choose-grunt-gulp-
npm/?utm_source=ourjs.com
 http://gruntjs.com/
 http://gruntjs.com/plugins