Grunt

開源軟件項目：Grunt

http://www.gruntjs.net/

.Grunt 是一個基於任務的JavaScript工程命令行構建工具。

爲什麼建立 grunt？

建立一個主要的或單文件 repo 是至關容易的，你會承諾在不久後將會添加 linting 和單元測試。使用 grunt，你曾經全部的推遲的藉口將所以消失。建立一個新的項目老是會要作一些必要而繁瑣並重復的工做例如 linting，單元測試，鏈接以及細化文件等，grunt 使得這些瑣碎的事更加簡單。

在許多的實驗與失敗嘗試後，我發如今一個巨大的 Makefile / Jakefile / Cakefile / Rakefile / ?akefile 中編寫與維護一整套「 JavaScript 構建過程」任務是壓倒性的，特別是考慮到我有多少個這樣的工程的時候。這種方式是無法知足我現行的需求的。

最後我意識到，一個帶有內建的經常使用任務的基於任務的構建工具對於我來講是最好的方式了。不幸的是，我沒有找到一個可以真正知足我要求的構建工具，因此我本身構建了一個。

版本發佈

• 2013年11月21日，Grunt v0.4.2 發佈。[1]  
• 2013年03月13日，Grunt v0.4.1 發佈。
• 2013年02月18日，Grunt v0.4.0 發佈。

我如何構建 grunt ?

首先做爲一個 JavaScript 開發者，我決定使用 Node.js 和 npm 是由於我關心的依賴組件（JSHint 和 UglifyJS）已經有 npm 模塊了。也就是說，當 Node.js 被設計用來處理高併發異步 IO 驅動的網絡服務時，它就註定不是設計用來當命令行構建工具的。可是不要緊，由於 grunt 可以在 OS X，Linux 與 Windows 下良好工做。

只須要使用 npm install -g grunt 安裝就行。

內建任務處理

grunt 擁有一下預約義的任務：

• concat - Concatenate files.
• init - Generate project scaffolding from a predefined template.
• lint - Validate files with JSHint.
• min - Minify files with UglifyJS.
• qunit - Run  QUnit unit tests in a headless PhantomJS instance.
• server - Start a static web server.
• test - Run unit tests with nodeunit.
• watch - Run predefined tasks whenever watched files change.

自定義任務

除了使用內建任務以外，你也可以建立本身的任務，與內建任務默認行爲不一樣？重寫一遍就行了。檢出grunt API documentation 和 內建任務源碼 ，這些可以給你全部用來建立自定義任務的信息。

同時，建立 grunt 插件容許你將關聯的任務輕鬆打包成 npm 模塊以便安裝。Backbone Boilerplate即是一個很好的 grunt 插件演示示例。

初始化新項目

這也許是我最喜歡的grunt特性，該 init task 初始化一個新項目，基於當前的環境以及一些問題的答案。一旦完成初始化，將會在生成一個帶有完整目錄結構的 grunt.js 配置文件，包括基本的readme，license，package.json，示例源文件以及單元測試（等）。這些文件以及內容依賴於被選擇的模版。

能夠在10秒鐘內爲整個項目建立總體框架，而不是一點點勾畫出一個一次性的主體。「填空」，而後運行 grunt 用來 lint , concat , minify 個人代碼。若是一切都經過了，我即可以提交以及增進個人代碼。任何但願爲該項目貢獻代碼的人均可以安裝 grunt 來作一樣的事。

當前還只有少許的內建初始化模版，包括一個 「jquery」 模版，它用來設計基本的 jQuery 插件以適應即將到來的 jQuery 插件站，還有一個通常的 「gruntfile」 模版用來快速的添加 grunt.js gruntfile 到一個已存在的項目中。你能夠重寫初始化模版文件，若是你想要自定義內建的初始化模版或者建立一個你本身的。你的模版不須要是與 grunt 關聯。你能夠建立一個初始化模版用來構建模型或者視圖或者 package.js 文件，作任何你想作的。

grunt 實際使用

每次 grunt 運行時，它將查看當前目錄下的名爲 grunt.js 的文件，又稱做 「gruntfile」 。若是該文件沒有找到， grunt 將繼續在它的父目錄中查找直到找到。該文件通常被放置在你的項目庫的根目錄下。它是一個由項目配置以及自定義項目特定任務組成的有效的 JavaScript 文件。

若是你喜歡 「action shots」 下面便有一個 grunt 示例：

Grunt實戰

咱們已經在 Bocoup 中使用了 grunt 。Rick Waldron 使用grunt構建了 Ringmark mobile test suite 。 Scott González 與 J?rn Zaefferer 已經使用 grunt 構建任務來替代全部的就 jQuery 項目（就jQuery，jQuery UI 以及 QUnit）等等。

Grunt 還只是在內測中，然而咱們已經在多個項目中使用它了，也許也會有一兩個小問題。該API已經通過屢次迭代，已經被認爲很穩定了。可是它仍然可能基於你的回饋在將來有所變動。

[2]  

Grunt 例子

Grunt 和 Gruntplugins(grunt 插件) 都是經過npm來管理和安裝，npm是一個node.js的包管理工具。

下面是一個 GruntFile 的例子， 項目的元數據是從 package.json 文件中導入到 GruntFile 文件中； grunt-contrib-uglify是一個 uglify 插件，用來壓縮源代碼，而且可使用元數據生成一個banner註釋。

在命令行下運行 grunt 命令會自動運行默認的 uglify 任務。[3]  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

module.exports =  function (grunt) {      // Project configuration.    grunt.initConfig({      pkg: grunt.file.readJSON( 'package.json' ),      uglify: {        options: {          banner:  '/*! <%= pkgname %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'        },        build: {          src:  'src/<%= pkgname %>.js' ,          dest:  'build/<%= pkgname %>.min.js'        }      }    });      // Load the plugin that provides the "uglify" task.    grunt.loadNpmTasks( 'grunt-contrib-uglify' );      // Default task(s).    grunt.registerTask( 'default' , [ 'uglify' ]);   };