Grunt教程——初涉Grunt

前端自動化，這樣的一個名詞聽起來很是的有吸引力，嚮往力。當今時代，前端工程師須要維護的代碼變得及爲龐大和複雜，代碼維護、打包、發佈等流程也 變得極爲繁瑣，同時浪費的時間和精力也愈來愈多，固然人爲的錯誤也隨着流程的增長而增長了更多的出錯率。導致每個團隊都但願有一種工具，能幫助整個團隊 在開發中能精簡流程、提升效率、減小錯誤率。隨之討論自動化部署也愈來愈多，而且國內不少大型團隊也都有本身成熟的自動化部署工具。據我所知，百度有 FIS,騰訊有Modjs，360有燕尾服，還有不少團隊在使用Ant，Shell等，而如今討論較多的是Grunt。

出於對這方面的興趣愛好，我也開始加入Grunt的使用大軍，也開始在學習並嘗試使用Grunt。那麼從今天開始，我和你們將一塊兒學習和使用Grunt。

Grunt是什麼

Grunt是一個基於JavaScript上的一個很強大的任務管理器(task runner)，或許這麼一說讓不少人以爲費解，簡單來講就是你能夠在你的終端機上，用JavaScript去執行一些程序來完成一些任務。好比說驗證 HTML、CSS、JavaScript的語法，壓縮CSS、JavaScript、圖像，Sass、LESS和Stylus編譯成CSS等等，這些東西 佛教徒吧很適合用Grunt來解決。

Grunt其實就是一個基於NodeJS,可用於自動化構建、測試、生成文檔的項目管理工具。他能夠更好的幫助一個團隊更好的提升效率、減小錯誤率。

簡單點來講，Grunt不只僅是構建工具，實際上他只是任務運行器，管理每一個子任務的自動化運行，咱們還能使用他作更多東西。

爲何要用Grunt

或許有不少要都像我同樣，會問「爲何要用Grunt」？其實用一句話能夠歸納出來：爲了自動化。對於前端項 目，爲了明確模塊分工，咱們能夠會將JavaScript、CSS代碼拆解成不少個模塊，他們都有獨立的一個個文件，但這樣一來用來頁面上，增長了文件個 數，同時也產生過多的Http請求，可從性能的角度來考慮，不利於頁面優化。因此咱們須要合併這些JavaScript和CSS文件。這樣一來，也指望有 一種工具能代替咱們手工操做，去完成這些任務。

你們都很是清楚，在項目發佈以前，咱們都須要作一個步驟，那就是儘量的將項目中的文件進行儘量壓縮，好比JavaScript、CSS、 images甚至是HTML文件，主要目的是減少加載文件的帶寬。另外，在不少狀況爲了安全性考慮，咱們須要對咱們項目的源代碼作一些單元測試和迴歸測 試。然而這些工做都是一些重複性的、乏味的工做。對於一個小型項目來講，或許沒有太大的感受，但對於一個大中型的項目，特別的參與人員過多的項目時，這些 工做就顯得更重要了。同時讓你們更以爲自動化工具是多麼的重要。

Grunt能作什麼

Grunt就是一個工具箱，就像一個百寶箱，擁有很是豐富的任務插件，能夠幫助開發人員實現各式各樣的構建目標。

在Grunt工具箱中，按任務目標咱們能夠分爲：

• 編譯文檔型：好比編譯LESS、Sass、Stylus、Coffeescript等；
• 文件操做型：好比說合並、壓縮JavaScript、CSS、圖片等；
• 質量保障型：好比JSHint、Jasmin、Mocha等；
• 類庫構建型：好比說Backbone.js、ember.js、angular.js等。

這些任務都依賴於給Grunt提供的插件來完成的，但不少工做依舊須要在命令終端手工輸入命令來完成這些操做。爲此在Grunt中可使用watch任務來實現一些監聽文件改變、自動觸發構建等功能。從而減小人工去每次操做任務。

運行Grunt須要什麼？

前面也說過，Grunt是基於Node.js基礎上運行的。須要能正常運行Grunt，必先在你的系統上正確安裝Node.js和NPM。

若是你從未接觸過node.js並不用太擔憂，只須要根據教程能夠很容易幫助您在系統上安裝Node.js。

環境好了以後，能夠經過終端命令中安裝grunt運行工具：

$ npm install -g grunt-cli 

Grunt的運行工具具備兩個版本，一個是服務器端的版本（grunt），另外一個是客戶端版本(grunt-cli)。而咱們在項目中須要安裝的是客戶端版本。也就是上面所示的安裝命令。這條命令將會把grunt命令植入到你的系統路徑中，這樣就容許你從任意目錄來運行它(定位到任意目錄運行grunt命令)。

一個Grunt項目還有兩個文件特別的重要：package.json和Gruntfile.js，前者用於Nodejs包管理，好比Grunt插件安裝，後者是Grunt配置文件，配置任務或者自定義任務。

• package.json:這個文件被用來存儲已經做爲npm模塊發佈的項目元數據（也就是依賴模塊）。你將在這個文件中列出你的項目所依賴的Grunt(一般咱們在這裏配置Grunt版本)和Grunt插件(相應版本的插件)
• Gruntfile.js:一般這個文件被命名爲Gruntfile.js或者Gruntfile.coffee，它是用於配置或者定義Grunt任務和加載Grunt插件的。

值得注意的是，package.json和Gruntfile.js兩個文件都放置在項目的根目錄中，而且應該與項目的源代碼一塊兒被提交。

建立package.json的方式

package.json是一個JSON文件，而這個文件是每一個Grunt項目必備的文件，所以在首要條件須要先建立這個文件。建立package.json文件方式有不少種：

• 根據grunt-init模板自動建立一個特定的package.json文件；
• 在命令終端經過npm init命令自動建立一個基本的package.json文件；
• 從官網上覆制或者下載一個package.json文件；
• 手工建立一個package.json文件；
• 在Grunt項目的根目錄下運行npm install建立一個空的package.json文件(不過我沒有成功過，一直有錯誤信息提示，不知道是否是個人系統仍是node環境有問題，正在查找中)

package.json文件模板

我採用了一種最簡單的方式——手工建立package.json文件。而這個文件又是Grunt項目中必備文件之一，所以如何建立package.json文件內容就很是的重要，那麼這裏，向你們顯示一個最簡單的package.json文件模板：

{
    "name":"項目名稱", "version":"項目版本號", "description":"項目描述", "author":"項目建立者", "license":"項目版權", "devDependencies": { //項目依賴插件 } } 

咱們來看看一個測試項目的package.json文件中的真正內容：

{
  "name": "testGrunt", "version": "0.1.0", "description": "this is test project with grunt.", "author": "airen", "license": "BSD", "devDependencies": { "grunt": "~0.4.1" } } 

能夠手動在package.json中添加Grunt的插件，也能夠經過如下命令的方式向package.json文件中添加：

$ npm install grunt插件名 --save-dev 

這不只會在本地安裝Grunt插件，它還會使用一個波浪形字符的版本範圍自動將所安裝的Grunt插件添加到項目依賴中。

例如使用下面的命令能夠把最新版本的Grunt安裝到你的項目中，並自動將它添加到你的項目依賴中：

$ npm install grunt --save-dev 

特別聲明：使用這個命令，在個人環境中沒有成功過，但願有知道緣由的朋友能告訴我，下面是報錯信息：

npm ERR! Error: Invalid name: "testGrunt" npm ERR! at ensureValidName (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/fixer.js:281:15) npm ERR! at Object.module.exports.fixNameField (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/fixer.js:196:5) npm ERR! at /usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/normalize.js:29:38 npm ERR! at Array.forEach (native) npm ERR! at normalize (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/normalize.js:28:15) npm ERR! at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:310:33) npm ERR! at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:124:33) npm ERR! at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:284:48 npm ERR! at fs.js:207:20 npm ERR! at Object.oncomplete (fs.js:107:15) npm ERR! If you need help, you may report this log at: npm ERR! <http://github.com/isaacs/npm/issues> npm ERR! or email it to: npm ERR! <npm-@googlegroups.com> npm ERR! System Darwin 13.0.0 npm ERR! command "node" "/usr/local/bin/npm" "install" "grunt" "--save-dev" npm ERR! cwd /Users/airen/Sites/grunt/testGrunt npm ERR! node -v v0.10.13 npm ERR! npm -v 1.3.2 npm ERR! npm ERR! Additional logging details can be found in: npm ERR! /Users/airen/Sites/grunt/testGrunt/npm-debug.log npm ERR! not ok code 0 

建立Gruntfile.js文件

package.json文件搞定以後，就能夠在項目根目下建立Gruntfile.js文件，這個時候你可使用grunt-init或者直接手工建立一個。咱們先來看一個Gruntfile.js的文件模板：

module.exports = function(grunt){ // 構建任務配置 grunt.initConfig({ //讀取package.json的內容，造成個json數據 pkg: grunt.file.readJSON('package.json'), //Grunt 任務配置 }); //加載Grunt插件 grunt.loadNpmTasks('Grunt插件名'); //默認的Grunt任務 grunt.registerTask('default',['Grunt任務'])； }; 

咱們來看一個簡單的示例：

module.exports = function(grunt) { // 構建任務配置 grunt.initConfig({ //讀取package.json的內容，造成個json數據 pkg: grunt.file.readJSON('package.json'), uglify: { //文件頭部輸出信息 options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, //具體任務配置 build: { //源文件 src: 'src/hello-grunt.js', //目標文件 dest: 'build/hello-grunt-min.js' } } }); // 加載指定插件任務 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默認執行的任務 grunt.registerTask('default', ['uglify']); }; 

到此，Grunt項目所需的package.json和Gruntfile.js文件都算是建立完成。有了這兩個文件以後，Grunt項目算是萬事具有，只欠東風了。你只須要在你的Grunt項目下運行：

$ npm install 

執行完後，你將會在你的命令終端看到一大串相似於下面的一些信息：

...
npm http 200 https://registry.npmjs.org/source-map/-/source-map-0.1.31.tgz npm http GET https://registry.npmjs.org/wordwrap npm http GET https://registry.npmjs.org/amdefine npm http 304 https://registry.npmjs.org/amdefine npm http 304 https://registry.npmjs.org/wordwrap grunt@0.4.1 node_modules/grunt ├── which@1.0.5 ├── dateformat@1.0.2-1.2.3 ├── eventemitter2@0.4.13 ├── colors@0.6.2 ├── hooker@0.2.3 ├── async@0.1.22 ├── coffee-script@1.3.3 ├── underscore.string@2.2.1 ├── findup-sync@0.1.2 (lodash@1.0.1) ├── iconv-lite@0.2.11 ├── lodash@0.9.2 ├── nopt@1.0.10 (abbrev@1.0.4) ├── rimraf@2.0.3 (graceful-fs@1.1.14) ├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3) ├── minimatch@0.2.12 (lru-cache@2.3.1, sigmund@1.0.0) └── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15) grunt-contrib-uglify@0.2.5 node_modules/grunt-contrib-uglify ├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1) └── uglify-js@2.4.1 (uglify-to-browserify@1.0.1, async@0.2.9, source-map@0.1.31, optimist@0.3.7) 

這個時候表示你的Grunt項目建立完成。你的項目結構也將變化成：

|--testGrunt |----Gruntfile.js |----node_modules |--------grunt |--------grunt-contrib-uglify |----package.json 

這裏演示的僅僅是一個簡單的示例，給你們對Grunt有一個初步的認識，在接下來，我將和你們一塊兒探討有關於Grunt更多的應用，但願對你們有所幫助。