?Grunt?是一個(gè)基于任務(wù)的?JavaScript?項(xiàng)目命令行構(gòu)建工具，運(yùn)行于 Node.js 平臺(tái)。Grunt 能夠從模板快速創(chuàng)建項(xiàng)目，合并、壓縮和校驗(yàn) CSS & JS 文件，運(yùn)行單元測(cè)試以及啟動(dòng)靜態(tài)服務(wù)器。

?

　　

?

安裝 Grunt

　　推薦 Windows 用戶(hù)使用 Git Shell 來(lái)進(jìn)行命令行操作。安裝 Windows 桌面版 GitHub 的時(shí)候會(huì)自動(dòng)安裝 Git Shell。

　　GitHub for Windows?下載地址：http://windows.github.com

　　Grunt 運(yùn)行于 Node.js 環(huán)境，這里假設(shè)你已經(jīng)安裝了 Node.js 和 NPM。

?

1	npm install grunt

　　為了便于操作，可以使用參數(shù) -g 配置為全局安裝：

?

1	npm install -g grunt

　　

創(chuàng)建項(xiàng)目框架

　　安裝好 Grunt 后就可以開(kāi)始創(chuàng)建項(xiàng)目了，Grunt 內(nèi)置下面四種基本的項(xiàng)目模板：

　　gruntfile，創(chuàng)建命令：

?

1	grunt init:gruntfile

　　commonjs，創(chuàng)建命令：

?

1	grunt init:commonjs

　　jquery，創(chuàng)建命令：

?

1	grunt init:jquery

　　node，創(chuàng)建命令：

?

1	grunt init:node

　　我們今天創(chuàng)建的是 jQuery 項(xiàng)目，編寫(xiě)一個(gè) jQuery 插件示例。現(xiàn)在 GitHub 創(chuàng)建好示例倉(cāng)庫(kù) GruntDemo，然后使用桌面版工具克隆到本地，在 Git Shell 中進(jìn)入倉(cāng)庫(kù)目錄，再輸入 grunt init:jquery 命令進(jìn)行創(chuàng)建，如果當(dāng)前位置已存在項(xiàng)目，可能會(huì)有如下提示：

　　

　　如果需要覆蓋，這個(gè)時(shí)候需要使用 --forece 參數(shù)：

?

1	grunt init:jquery?--force

　　創(chuàng)建項(xiàng)目時(shí)，需要填寫(xiě)一些項(xiàng)目的基本信息，例如項(xiàng)目名稱(chēng)、描述、倉(cāng)庫(kù)地址、作者信息（后面幾項(xiàng)有默認(rèn)內(nèi)容）等，如圖示：

　　

　　OK，到這里項(xiàng)目就創(chuàng)建成功了！下面是項(xiàng)目的目錄結(jié)構(gòu)：

　　

　　并且?README.md 文件的內(nèi)容和格式也生成好了：

　　

　　然后就可以編寫(xiě)插件代碼了。Grunt 提供的 jQuery 插件代碼框架如下：

?

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

/* ?* 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));

　　同時(shí)還生成了相應(yīng)的 Qunit 測(cè)試代碼和頁(yè)面：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

/*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));

　　

本文轉(zhuǎn)自山邊小溪 51CTO博客，原文鏈接：http://blog.51cto.com/lihongbo/1134174，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。