當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架

發(fā)布時(shí)間：2023/12/31 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

　　?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 用戶使用 Git Shell 來進(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 后就可以開始創(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)目，編寫一個(gè) jQuery 插件示例。現(xiàn)在 GitHub 創(chuàng)建好示例倉庫 GruntDemo，然后使用桌面版工具克隆到本地，在 Git Shell 中進(jìn)入倉庫目錄，再輸入 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àng)目的基本信息，例如項(xiàng)目名稱、描述、倉庫地址、作者信息（后面幾項(xiàng)有默認(rèn)內(nèi)容）等，如圖示：

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

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

　　然后就可以編寫插件代碼了。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));  

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

  /*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ǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。