JavaScript 項目構建工具 Grunt 實踐：安裝和建立項目架構

標籤：

　 Grunt 是一個基於任務的 JavaScript 項目命令列構建工具，運行於 Node.js 平台。Grunt 能夠從模板快速建立項目，合并、壓縮和校正 CSS & JS 檔案，運行單元測試以及啟動靜態伺服器。

 

　　

 

安裝 Grunt

　　推薦 Windows 使用者使用 Git Shell 來進行命令列操作。安裝 Windows 案頭版 GitHub 的時候會自動安裝 Git Shell。

　　GitHub for Windows ：http://windows.github.com

　　Grunt 運行於 Node.js 環境，這裡假設你已經安裝了 Node.js 和 NPM。

1	npm install grunt

　　為了便於操作，可以使用參數 -g 配置為全域安裝：

1	npm install -g grunt

　　

建立項目架構

　　安裝好 Grunt 後就可以開始建立項目了，Grunt 內建下面四種基本的項目模板：

　　gruntfile，建立命令：

1	grunt init:gruntfile

　　commonjs，建立命令：

1	grunt init:commonjs

　　jquery，建立命令：

1	grunt init:jquery

　　node，建立命令：

1	grunt init:node

　　我們今天建立的是 jQuery 項目，編寫一個 jQuery 外掛程式樣本。現在 GitHub 建立好樣本倉庫 GruntDemo，然後使用案頭版工具複製到本地，在 Git Shell 中進入倉庫目錄，再輸入 grunt init:jquery 命令進行建立，如果當前位置已存在項目，可能會有如下提示：

　　

　　如果需要覆蓋，這個時候需要使用 --forece 參數：

1	grunt init:jquery --force

　　建立項目時，需要填寫一些項目的基本資料，例如項目名稱、描述、倉庫地址、作者資訊（後面幾項有預設內容）等，示：

　　

　　OK，到這裡項目就建立成功了！下面是項目的目錄結構：

　　

　　並且 README.md 檔案的內容和格式也產生好了：

　　

　　然後就可以編寫外掛程式代碼了。Grunt 提供的 jQuery 外掛程式代碼架構如下：

12345678910111213141516171819202122232425262728

/* * GruntDemo * https://github.com/bluesky/grunt-demo * * Copyright (c) 2013 BlueSky * Licensed under the MIT license. */ (function($) {   // Collection method.  $.fn.awesome = function() {    return this.each(function() {      $(this).html(‘awesome‘);    });  };   // Static method.  $.awesome = function() {    return ‘awesome‘;  };   // Custom selector.  $.expr[‘:‘].awesome = function(elem) {    return elem.textContent.indexOf(‘awesome‘) >= 0;  }; }(jQuery));

　　同時還產生了相應的 Qunit 測試代碼和頁面：

1234567891011121314151617181920212223242526272829303132333435363738

/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*//*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*//*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/(function($) {   module(‘jQuery#awesome‘, {    setup: function() {      this.elems = $(‘#qunit-fixture‘).children();    }  });   test(‘is chainable‘, 1, function() {    // Not a bad test to run on collection methods.    strictEqual(this.elems.awesome(), this.elems, ‘should be chaninable‘);  });   test(‘is awesome‘, 1, function() {    strictEqual(this.elems.awesome().text(), ‘awesomeawesomeawesome‘, ‘should be thoroughly awesome‘);  });   module(‘jQuery.awesome‘);   test(‘is awesome‘, 1, function() {    strictEqual($.awesome(), ‘awesome‘, ‘should be thoroughly awesome‘);  });   module(‘:awesome selector‘, {    setup: function() {      this.elems = $(‘#qunit-fixture‘).children();    }  });   test(‘is awesome‘, 1, function() {    // Use deepEqual & .get() when comparing jQuery objects.    deepEqual(this.elems.filter(‘:awesome‘).get(), this.elems.last().get(), ‘knows awesome when it sees it‘);  }); }(jQuery));

　　

JavaScript 項目構建工具 Grunt 實踐：安裝和建立項目架構