這篇文章主要講解了“Gruntfile.js怎么使用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Gruntfile.js怎么使用”吧！

子長ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

一、grunt模塊簡介

grunt插件，是一種npm環(huán)境下的自動化工具。對于需要反復重復的任務，例如壓縮、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。grunt模塊根據(jù)Gruntfile.js文件中的配置進行任務。如果在package.json中定義如下命令：

【相關課程推薦：JavaScript視頻教程】

"scripts": {    "build": "npm install && grunt"}

因為運行npm run build會先安裝devDependencies中定義的一些模塊，則運行npm run build這個命令相當于做如下操作：

● npm install grunt-cli -g

● npm install

● grunt

二、gruntfile.js的結構：

● "wrapper" 函數(shù)

● 項目和任務配置

● 加載 grunt 插件和任務

● 自定義任務

三、"wrapper" 函數(shù)

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

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

四、項目和任務配置

大部分的Grunt任務都依賴某些配置數(shù)據(jù)，我們通過grunt.initConfig 方法來配置Grunt任務的參數(shù)。grunt.initConfig 方法的參數(shù)是一個JSON對象，你可以在這個配置對象中存儲任意的數(shù)據(jù)。此外，由于這本身就是JavaScript，你還可以在這里使用任意的有效的JS代碼。甚至你可以用<% %>模板字符串來引用已經(jīng)配置過的屬性，例如：

// 項目和任務配置grunt.initConfig({  pkg: grunt.file.readJSON('package.json'), //獲取 package.json 中的元數(shù)據(jù)(js代碼)  proj:{    name:'hello',    description:'a hello demo'  },  hello: {    options: {      name: '<%= proj.name %>'  //用<% %>模板字符串匹配hello    },    srcs: ['1.txt', '2.txt']  }});

在grunt.initConfig 方法中配置的屬性，在任務模塊中，可用grunt.config方法進行訪問，例如：

grunt.config("proj.name");

另外，grunt任務模塊會自動根據(jù)任務名來提取配置對象中和任務名對應的屬性，比如定義任務hello，則在配置對象對應的屬性"hello"中配置任務執(zhí)行函數(shù)中所需用到的配置和數(shù)據(jù)。

五、加載grunt插件任務

為了減少重復勞動，我們可以加載已有的插件任務。

1.加載自己私有的grunt插件

可將自己定義的一些task腳本放在同一個目錄下，通過grunt.loadTasks方法從指定目錄加載該目錄下所有的grunt任務腳本。

2.加載在npm中發(fā)布的grunt插件

像 grunt-contrib-copy和grunt-contrib-uglify這些常用的任務都已經(jīng)以grunt插件的形式被開發(fā)出來了，且被發(fā)布在npm公開庫中，只要在 package.json 文件中將需要使用的插件列在dependency中，并通過npm install安裝之后，就可以直接加載該任務。

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

3.直接加載所有以"grunt-"打頭的插件

npm上有個load-grunt-tasks插件可以用來加載dependency列表中所有以"grunt-"打頭的插件。將需要使用的"grunt-"打頭的插件列在dependency中，然后在Gruntfile.js中進行調用。

//Load grunt tasks from NPM packagesload-grunt-tasks

六、自定義任務

1.直接定義任務的行為

grunt.registerTask('hello', 'Show some msg', function() {  console.log(this.options().name); //輸出hello});

2.定義為任務列表

可以將一個任務定義為一系列任務的組合，這一系列任務將按照順序執(zhí)行。

grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);

3.定義默認任務

通過定義 default 任務，可以讓Grunt默認執(zhí)行一個或多個任務。執(zhí)行 grunt 命令時如果不指定一個任務的話，將會執(zhí)行默認任務。如進行下面定義的話執(zhí)行grunt 相當于執(zhí)行grunt hello。

grunt.registerTask('default', ['hello']);

4.定義復合任務

registerMultiTask方法可以定義一個復合任務，復合任務將會對grunt.initConfig 方法中配置的相應屬性中除了options外定義的屬性依次作為target:data對進行處理。

module.exports = function(grunt) {    grunt.initConfig({        Log: {            options: {                sep: ';'            },            srcs: ['1.txt', '2.txt'],            dests: ['d1.txt', 'd2.txt']        }    });    grunt.registerMultiTask("Log", function() {        var options = this.options({ sep: '&' });        console.log(this.target);         console.log(this.data.join(options.sep));    });};

執(zhí)行grunt Log將會輸出：

Running "Log:srcs" (Log) tasksrcs1.txt;2.txtRunning "Log:dests" (Log) taskdestsd1.txt;d2.txt

定義任務行為Tips

1.任務內(nèi)部可以執(zhí)行其他的任務。

grunt.registerTask('mytask', function() {  grunt.task.run('task1', 'task2');  // Or:  grunt.task.run(['task1', 'task2']);});

2.定義異步任務

grunt.registerTask('mytask', function() {  var done = this.async();  //do something  done();});

3.當任務失敗時，所有后續(xù)任務都將終止

在任務中，當執(zhí)行失敗，可以return false來表明當前任務執(zhí)行失敗，一般，多個任務按順序執(zhí)行，如果有任務失敗時，所有后續(xù)任務都將終止?？梢酝ㄟ^在命令行后加上--force來使有任務失敗時，后續(xù)任務能繼續(xù)進行。

4.任務中檢查前置任務狀態(tài)

有些任務可以依賴于其他任務的成功執(zhí)行。通過grunt.task.requires方法來檢查其前置任務是否已經(jīng)執(zhí)行，并且沒有失敗。

5.任務中檢查配置屬性

可以用方法grunt.task.requiresConfig指定一個或者多個字符串或者數(shù)組的配置屬性為必需的。如果一個或多個必需的配置屬性缺失，就通知系統(tǒng)當前任務失敗。

感謝各位的閱讀，以上就是“Gruntfile.js怎么使用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Gruntfile.js怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設公司，，小編將為大家推送更多相關知識點的文章，歡迎關注！

網(wǎng)頁題目：Gruntfile.js怎么使用-創(chuàng)新互聯(lián)
文章出自：http://chinadenli.net/article42/dojjec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、全網(wǎng)營銷推廣、App開發(fā)、動態(tài)網(wǎng)站、品牌網(wǎng)站設計、關鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)