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。
npm install grunt
為了便於操作,可以使用參數 -g 配置為全域安裝:
npm install -g grunt
建立項目架構
安裝好 Grunt 後就可以開始建立項目了,Grunt 內建下面四種基本的項目模板:
gruntfile,建立命令:
grunt init:gruntfile
commonjs,建立命令:
grunt init:commonjs
jquery,建立命令:
grunt init:jquery
node,建立命令:
grunt init:node
我們今天建立的是 jQuery 項目,編寫一個 jQuery 外掛程式樣本。現在 GitHub 建立好樣本倉庫 GruntDemo,然後使用案頭版工具複製到本地,在 Git Shell 中進入倉庫目錄,再輸入 grunt init:jquery 命令進行建立,如果當前位置已存在項目,可能會有如下提示:
如果需要覆蓋,這個時候需要使用 --forece 參數:
grunt init:jquery --force
建立項目時,需要填寫一些項目的基本資料,例如項目名稱、描述、倉庫地址、作者資訊(後面幾項有預設內容)等,示:
OK,到這裡項目就建立成功了!下面是項目的目錄結構:
並且 README.md 檔案的內容和格式也產生好了:
然後就可以編寫外掛程式代碼了。Grunt 提供的 jQuery 外掛程式代碼架構如下:
/* * 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 測試代碼和頁面:
/*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 實踐:任務和指令》,敬請期待……
您可能感興趣的相關文章
- 經典的白富美型 jQuery 圖片輪播外掛程式
- 精心挑選的優秀 jQuery Ajax 分頁外掛程式
- 十款精心挑選的線上CSS3代碼產生工具
- 讓人愛不釋手的13套精美網頁表徵圖素材
- 10套精美的免費網站後台管理系統模板
本文連結:JavaScript 項目構建工具 Grunt 實踐:簡介和安裝
編譯來源:夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源