Grunt入門

快速入門

Grunt和 Grunt 插件是通過 npm 安裝并管理的,npm是 Node.js 的包管理器。
Grunt 0.4.x 必須配合Node.js >= 0.8.0版本使用。;奇數(shù)版本號的 Node.js 被認為是不穩(wěn)定的開發(fā)版。在安裝 Grunt 前,請確保當前環(huán)境中所安裝的 npm 已經(jīng)是最新版本,執(zhí)行 npm update -g npm 指令進行升級(在某些系統(tǒng)中可能需要 sudo 指令)。
如果你已經(jīng)安裝了 Grunt,現(xiàn)在需要參考一些文檔手冊,那就請看一看 Gruntfile 實例 和如何 配置任務(wù)吧。

安裝 CLI

還在使用 Grunt 0.3 版本嗎?請查看 Grunt 0.3 注意事項
在繼續(xù)學習前,你需要先將Grunt命令行(CLI)安裝到全局環(huán)境中。安裝時可能需要使用sudo(針對OSX、*nix、BSD等系統(tǒng)中)權(quán)限或者作為管理員(對于Windows環(huán)境)來執(zhí)行以下命令。

npm install -g grunt-cli

上述命令執(zhí)行完后,grunt 命令就被加入到你的系統(tǒng)路徑中了,以后就可以在任何目錄下執(zhí)行此命令了。
注意,安裝grunt-cli并不等于安裝了 Grunt!Grunt CLI的任務(wù)很簡單:調(diào)用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是,允許你在同一個系統(tǒng)上同時安裝多個版本的 Grunt。
這樣就能讓多個版本的 Grunt 同時安裝在同一臺機器上。

CLI 是如何工作的

每次運行g(shù)runt 時,他就利用node提供的require()系統(tǒng)查找本地安裝的 Grunt。正是由于這一機制,你可以在項目的任意子目錄中運行g(shù)runt 。
如果找到一份本地安裝的 Grunt,CLI就將其加載,并傳遞Gruntfile中的配置信息,然后執(zhí)行你所指定的任務(wù)。為了更好的理解 Grunt CLI的執(zhí)行原理,請閱讀源碼

拿一份現(xiàn)有的 Grunt 項目練手

假定Grunt CLI已經(jīng)正確安裝,并且已經(jīng)有一份配置好package.json 和 Gruntfile 文件的項目了,接下來就很容易拿Grunt練手了:

  1. 將命令行的當前目錄轉(zhuǎn)到項目的根目錄下。
  2. 執(zhí)行npm install命令安裝項目依賴的庫。
  3. 執(zhí)行 grunt 命令。

OK,就是這么簡單。還可以通過grunt --help
命令列出所有已安裝的Grunt任務(wù)(task),但是一般更建議去查看項目的文檔以獲取幫助信息。

準備一份新的 Grunt 項目

一般需要在你的項目中添加兩份文件:package.json 和 Gruntfile。

  • package.json: 此文件被npm用于存儲項目的元數(shù)據(jù),以便將此項目發(fā)布為npm模塊。你可以在此文件中列出項目依賴的grunt和Grunt插件,放置于devDependencies配置段內(nèi)。
  • Gruntfile: 此文件被命名為 Gruntfile.js 或 Gruntfile.coffee,用來配置或定義任務(wù)(task)并加載Grunt插件的。此文檔中提到的 Gruntfile 其實說的是一個文件,文件名是 Gruntfile.js 或Gruntfile.coffee

package.json

package.json應(yīng)當放置于項目的根目錄中,與Gruntfile在同一目錄中,并且應(yīng)該與項目的源代碼一起被提交。在上述目錄(package.json所在目錄)中運行npm install將依據(jù)package.json文件中所列出的每個依賴來自動安裝適當版本的依賴。
下面列出了幾種為你的項目創(chuàng)建package.json文件的方式:

  • 大部分 grunt-init 模版都會自動創(chuàng)建特定于項目的package.json文件。
  • npm init命令會創(chuàng)建一個基本的package.json文件。
  • 復制下面的案例,并根據(jù)需要做擴充,參考此說明.
{
 "name": "my-project-name",
 "version": "0.1.0", 
 "devDependencies": {
   "grunt": "~0.4.5",
   "grunt-contrib-jshint": "~0.10.0",
   "grunt-contrib-nodeunit": "~0.4.1",
   "grunt-contrib-uglify": "~0.5.0" 
  }
}

安裝Grunt 和 grunt插件

向已經(jīng)存在的package.json 文件中添加Grunt和grunt插件的最簡單方式是通過npm install <module> --save-dev
命令。此命令不光安裝了<module>,還會自動將其添加到devDependencies 配置段中,遵循tilde version range格式。
例如,下面這條命令將安裝Grunt最新版本到項目目錄中,并將其添加到devDependencies內(nèi):

npm install grunt --save-dev

同樣,grunt插件和其它node模塊都可以按相同的方式安裝。下面展示的實例就是安裝 JSHint 任務(wù)模塊:

npm install grunt-contrib-jshint --save-dev

Grunt 插件 頁面可以看到當前可用的 Grunt 插件,他們可以直接在項目中安裝并使用。
安裝插件之后,請務(wù)必確保將更新之后的 package.json 文件提交到項目倉庫中。

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件,應(yīng)當放在你的項目根目錄中,和package.json文件在同一目錄層級,并和項目源碼一起加入源碼管理器。
Gruntfile由以下幾部分構(gòu)成:

  • "wrapper" 函數(shù)
  • 項目與任務(wù)配置
  • 加載grunt插件和任務(wù)
  • 自定義任務(wù)

Gruntfile文件案例

在下面列出的這個 Gruntfile 中,package.json文件中的項目元數(shù)據(jù)(metadata)被導入到 Grunt 配置中, grunt-contrib-uglify 插件中的uglify 任務(wù)(task)被配置為壓縮(minify)源碼文件并依據(jù)上述元數(shù)據(jù)動態(tài)生成一個文件頭注釋。當在命令行中執(zhí)行 grunt 命令時,uglify 任務(wù)將被默認執(zhí)行。

module.exports = function(grunt) { 
  // Project configuration. 
  grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     uglify: { 
        options: { 
           banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, 
           build: { 
               src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' 
           } 
        } 
   }); 
   // 加載包含 "uglify" 任務(wù)的插件。 
   grunt.loadNpmTasks('grunt-contrib-uglify');
   // 默認被執(zhí)行的任務(wù)列表。   
   grunt.registerTask('default', ['uglify']);
};

前面已經(jīng)向你展示了整個 Gruntfile,接下來將詳細解釋其中的每一部分。

"wrapper" 函數(shù)

每一份 Gruntfile (和grunt插件)都遵循同樣的格式,你所書寫的Grunt代碼必須放在此函數(shù)內(nèi):

module.exports = function(grunt) { 
   // Do grunt-related things in here
};

項目和任務(wù)配置

大部分的Grunt任務(wù)都依賴某些配置數(shù)據(jù),這些數(shù)據(jù)被定義在一個object內(nèi),并傳遞給grunt.initConfig 方法。
在下面的案例中,grunt.file.readJSON('package.json') 將存儲在package.json文件中的JSON元數(shù)據(jù)引入到grunt config中。 由于<% %>模板字符串可以引用任意的配置屬性,因此可以通過這種方式來指定諸如文件路徑和文件列表類型的配置數(shù)據(jù),從而減少一些重復的工作。
你可以在這個配置對象中(傳遞給initConfig()方法的對象)存儲任意的數(shù)據(jù),只要它不與你任務(wù)配置所需的屬性沖突,否則會被忽略。此外,由于這本身就是JavaScript,你不僅限于使用JSON;你可以在這里使用任意的有效的JS代碼。如果有必要,你甚至可以以編程的方式生成配置。
與大多數(shù)task一樣,grunt-contrib-uglify 插件中的uglify 任務(wù)要求它的配置被指定在一個同名屬性中。在這里有一個例子, 我們指定了一個banner選項(用于在文件頂部生成一個注釋),緊接著是一個單一的名為build的uglify目標,用于將一個js文件壓縮為一個目標文件。

// Project configuration.
grunt.initConfig({ 
  pkg: grunt.file.readJSON('package.json'), 
  uglify: { 
    options: { 
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, 
      build: { 
         src: 'src/<%= pkg.name %>.js', 
         dest: 'build/<%= pkg.name %>.min.js' 
     } 
  }
});

加載 Grunt 插件和任務(wù)

concatenation、[minification]、grunt-contrib-uglifylinting這些常用的任務(wù)(task)都已經(jīng)以grunt插件的形式被開發(fā)出來了。只要在 package.json 文件中被列為dependency(依賴)的包,并通過npm install安裝之后,都可以在Gruntfile中以簡單命令的形式使用:

// 加載能夠提供"uglify"任務(wù)的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');

注意: grunt --help 命令將列出所有可用的任務(wù)。

自定義任務(wù)

通過定義 default任務(wù),可以讓Grunt默認執(zhí)行一個或多個任務(wù)。在下面的這個案例中,執(zhí)行 grunt 命令時如果不指定一個任務(wù)的話,將會執(zhí)行uglify任務(wù)。這和執(zhí)行g(shù)runt uglify 或者 grunt default
的效果一樣。default任務(wù)列表數(shù)組中可以指定任意數(shù)目的任務(wù)(可以帶參數(shù))。

// Default task(s).
grunt.registerTask('default', ['uglify']);

如果Grunt插件中的任務(wù)(task)不能滿足你的項目需求,你還可以在Gruntfile
中自定義任務(wù)(task)。例如,在下面的 Gruntfile
中自定義了一個default
任務(wù),并且他甚至不依賴任務(wù)配置:

module.exports = function(grunt) { 
// A very basic default task. 
  grunt.registerTask('default', 'Log some stuff.',   function() { 
    grunt.log.write('Logging some stuff...').ok(); 
  });
};

特定于項目的任務(wù)不必在 Gruntfile 中定義。他們可以定義在外部.js 文件中,并通過grunt.loadTasks方法加載。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,698評論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,202評論 3 426
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,742評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,580評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,297評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,688評論 1 327
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,693評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,875評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,438評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,183評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,384評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,931評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,612評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,022評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,297評論 1 292
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,093評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,330評論 2 377

推薦閱讀更多精彩內(nèi)容

  • 這里為了節(jié)省時間,這里先創(chuàng)建一個angular 項目cd /Users/yuyi/Documents/workS...
    Misaki_yuyi閱讀 200評論 0 0
  • 快速入門 Grunt和 Grunt 插件是通過 npm 安裝并管理的,npm是 Node.js 的包管理器。 在安...
    angelwgh閱讀 1,128評論 0 0
  • “貓頭鷹”葛晨,各位青島的聽友們,你們還記得這個人嗎? 葛晨十幾年前曾經(jīng)是青島廣播電臺的一個主持人。 那時靜空我最...
    那時靜空閱讀 1,911評論 1 1
  • 本人程。在2017年5月中旬左右開了一個叫做合啪云(后查詢該公司名為滁州合啪網(wǎng)絡(luò)科技有限公司)的微盤交易。入了20...
    志愿_3252閱讀 517評論 0 0
  • 任課老師或者孩子的班主任來“家訪”這種形式,在我們小時候上學的時候,似乎很通行,在我的印象里,還有好幾次很清晰的記...
    繭破閱讀 765評論 0 3