?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 插件代碼框架如下：

?

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

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

?

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

　　

本文轉自山邊小溪 51CTO博客，原文鏈接：http://blog.51cto.com/lihongbo/1134174，如需轉載請自行聯系原作者

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。