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

　　

　　推薦 Windows 使用者使用 Git Shell 來進行指令行操作。安裝 Windows 桌面版 GitHub 的時候會自動安裝 Git Shell。

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

<a href="http://blog.51cto.com/lihongbo/1134174#">?</a>

1

<code>npm install grunt</code>

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

<code>npm install -g grunt</code>

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

　　gruntfile，建立指令：

<code>grunt init</code><code>:gruntfile</code>

　　commonjs，建立指令：

<code>grunt init</code><code>:commonjs</code>

　　jquery，建立指令：

<code>grunt init</code><code>:jquery</code>

　　node，建立指令：

<code>grunt init</code><code>:node</code>

　　我們今天建立的是 jQuery 項目，編寫一個 jQuery 插件示例。現在 GitHub 建立好示例倉庫 GruntDemo，然後使用桌面版工具克隆到本地，在 Git Shell 中進入倉庫目錄，再輸入 grunt init:jquery 指令進行建立，如果目前位置已存在項目，可能會有如下提示：

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

<code>grunt init</code><code>:jquery</code> <code>--force</code>

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

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

　　并且 README.md 檔案的内容和格式也生成好了：

　　然後就可以編寫插件代碼了。Grunt 提供的 jQuery 插件代碼架構如下：

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

<code>/*</code>

<code> </code><code>* GruntDemo</code>

<code> </code><code>* https://github.com/bluesky/grunt-demo</code>

<code> </code><code>*</code>

<code> </code><code>* Copyright (c) 2013 BlueSky</code>

<code> </code><code>* Licensed under the MIT license.</code>

<code> </code><code>*/</code>

<code>(</code><code>function</code><code>($) {</code>

<code>  </code><code>// Collection method.</code>

<code>  </code><code>$.fn.awesome = </code><code>function</code><code>() {</code>

<code>    </code><code>return</code> <code>this</code><code>.each(</code><code>function</code><code>() {</code>

<code>      </code><code>$(</code><code>this</code><code>).html(</code><code>'awesome'</code><code>);</code>

<code>    </code><code>});</code>

<code>  </code><code>};</code>

<code>  </code><code>// Static method.</code>

<code>  </code><code>$.awesome = </code><code>function</code><code>() {</code>

<code>    </code><code>return</code> <code>'awesome'</code><code>;</code>

<code>  </code><code>// Custom selector.</code>

<code>  </code><code>$.expr[</code><code>':'</code><code>].awesome = </code><code>function</code><code>(elem) {</code>

<code>    </code><code>return</code> <code>elem.textContent.indexOf(</code><code>'awesome'</code><code>) &gt;= 0;</code>

<code>}(jQuery));</code>

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

29

30

31

32

33

34

35

36

37

38

<code>/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/</code>

<code>/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/</code>

<code>/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/</code>

<code>  </code><code>module(</code><code>'jQuery#awesome'</code><code>, {</code>

<code>    </code><code>setup: </code><code>function</code><code>() {</code>

<code>      </code><code>this</code><code>.elems = $(</code><code>'#qunit-fixture'</code><code>).children();</code>

<code>    </code><code>}</code>

<code>  </code><code>});</code>

<code>  </code><code>test(</code><code>'is chainable'</code><code>, 1, </code><code>function</code><code>() {</code>

<code>    </code><code>// Not a bad test to run on collection methods.</code>

<code>    </code><code>strictEqual(</code><code>this</code><code>.elems.awesome(), </code><code>this</code><code>.elems, </code><code>'should be chaninable'</code><code>);</code>

<code>  </code><code>test(</code><code>'is awesome'</code><code>, 1, </code><code>function</code><code>() {</code>

<code>    </code><code>strictEqual(</code><code>this</code><code>.elems.awesome().text(), </code><code>'awesomeawesomeawesome'</code><code>, </code><code>'should be thoroughly awesome'</code><code>);</code>

<code>  </code><code>module(</code><code>'jQuery.awesome'</code><code>);</code>

<code>    </code><code>strictEqual($.awesome(), </code><code>'awesome'</code><code>, </code><code>'should be thoroughly awesome'</code><code>);</code>

<code>  </code><code>module(</code><code>':awesome selector'</code><code>, {</code>

<code>    </code><code>// Use deepEqual &amp; .get() when comparing jQuery objects.</code>

<code>    </code><code>deepEqual(</code><code>this</code><code>.elems.filter(</code><code>':awesome'</code><code>).get(), </code><code>this</code><code>.elems.last().get(), </code><code>'knows awesome when it sees it'</code><code>);</code>

本文轉自山邊小溪 51CTO部落格，原文連結：http://blog.51cto.com/lihongbo/1134174，如需轉載請自行聯系原作者