javascript中g(shù)runtfile的使用方法

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹javascript中g(shù)runtfile的使用方法，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

一、grunt模塊簡(jiǎn)介

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

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

因?yàn)檫\(yùn)行npm run build會(huì)先安裝devDependencies中定義的一些模塊，則運(yùn)行npm run build這個(gè)命令相當(dāng)于做如下操作：

● npm install grunt-cli -g

● npm install

● grunt

二、gruntfile.js的結(jié)構(gòu)：

● "wrapper" 函數(shù)

● 項(xiàng)目和任務(wù)配置

● 加載 grunt 插件和任務(wù)

● 自定義任務(wù)

三、"wrapper" 函數(shù)

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

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

四、項(xiàng)目和任務(wù)配置

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

// 項(xiàng)目和任務(wù)配置
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 方法中配置的屬性，在任務(wù)模塊中，可用grunt.config方法進(jìn)行訪問(wèn)，例如：

grunt.config("proj.name");

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

五、加載grunt插件任務(wù)

為了減少重復(fù)勞動(dòng)，我們可以加載已有的插件任務(wù)。

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

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

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

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

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

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

npm上有個(gè)load-grunt-tasks插件可以用來(lái)加載dependency列表中所有以"grunt-"打頭的插件。
將需要使用的"grunt-"打頭的插件列在dependency中，然后在Gruntfile.js中進(jìn)行調(diào)用。

//Load grunt tasks from NPM packages
load-grunt-tasks

六、自定義任務(wù)

1.直接定義任務(wù)的行為

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

2.定義為任務(wù)列表

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

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

3.定義默認(rèn)任務(wù)

通過(guò)定義 default 任務(wù)，可以讓Grunt默認(rèn)執(zhí)行一個(gè)或多個(gè)任務(wù)。執(zhí)行 grunt 命令時(shí)如果不指定一個(gè)任務(wù)的話，將會(huì)執(zhí)行默認(rèn)任務(wù)。如進(jìn)行下面定義的話執(zhí)行g(shù)runt 相當(dāng)于執(zhí)行g(shù)runt hello。

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

4.定義復(fù)合任務(wù)

registerMultiTask方法可以定義一個(gè)復(fù)合任務(wù)，復(fù)合任務(wù)將會(huì)對(duì)grunt.initConfig 方法中配置的相應(yīng)屬性中除了options外定義的屬性依次作為target:data對(duì)進(jìn)行處理。

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í)行g(shù)runt Log將會(huì)輸出：

Running "Log:srcs" (Log) task
srcs
1.txt;2.txt
Running "Log:dests" (Log) task
dests
d1.txt;d2.txt

定義任務(wù)行為Tips

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

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

2.定義異步任務(wù)

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

3.當(dāng)任務(wù)失敗時(shí)，所有后續(xù)任務(wù)都將終止

在任務(wù)中，當(dāng)執(zhí)行失敗，可以return false來(lái)表明當(dāng)前任務(wù)執(zhí)行失敗，一般，多個(gè)任務(wù)按順序執(zhí)行，如果有任務(wù)失敗時(shí)，所有后續(xù)任務(wù)都將終止?？梢酝ㄟ^(guò)在命令行后加上--force來(lái)使有任務(wù)失敗時(shí)，后續(xù)任務(wù)能繼續(xù)進(jìn)行。

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

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

5.任務(wù)中檢查配置屬性

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

關(guān)于javascript中g(shù)runtfile的使用方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。