使用GruntJS構(gòu)建Web程序之Tasks(任務(wù))篇
如何自定義Grunt任務(wù)
有時我們需要寫一些自己的grunt任務(wù),下面是一個具體例子
一、準(zhǔn)備
1. 新建一個目錄g1
2. 新建package.json,放入g1
3. 新建Gruntfile.js,放入g1
package.json
{
"name": "g1",
"version": "0.1.0",
"author": "@snandy",
"homepage": "http://www.g1.com",
"devDependencies": {
"grunt": "~0.4.0"
}
}
4. cd進入g1,npm install安裝grunt包
這整個目錄結(jié)構(gòu)如下
Gruntfile.js暫時空著。
二、創(chuàng)建一個最簡單的任務(wù)
grunt.registerTask(taskName, [description,] taskFunction)
taskName 任務(wù)名稱,命令行里使用 grunt + taskName
description 任務(wù)的描述
taskFunction 任務(wù)的實現(xiàn)
Gruntfile.js里填入一下代碼
module.exports = function(grunt) {
grunt.registerTask('mytask', '一個最簡單的任務(wù)演示,根據(jù)參數(shù)打印不同的輸出.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln('任務(wù)' + this.name + ", 沒有傳參數(shù)");
} else if (arguments.length === 1) {
grunt.log.writeln('任務(wù)' + this.name + ", 有一個參數(shù)是" + arg1);
} else {
grunt.log.writeln('任務(wù)' + this.name + ", 有兩個參數(shù)分別是" + arg1 + ", " + arg2);
}
});
};
注冊了一個任務(wù)“mytask”,實現(xiàn)一個最簡單的根據(jù)所傳參數(shù)不同實現(xiàn)不同的打印輸出,看運行結(jié)果我們需要進入命令行。
進入到g1目錄,輸入 grunt mytask
再輸入 grunt mytask:snandy
任務(wù)名后面加一個冒號就可以傳參了
再輸入 grunt mytask:snandy:backus
冒號間隔可以傳多個參數(shù)
三、一次創(chuàng)建多個任務(wù)
grunt.registerMultiTask(taskName, [description,] taskFunction)
可以看到參數(shù)是一樣的,方法名不同。但使用方式卻不太同,需要先初始化config,Gruntfile.js如下
module.exports = function(grunt) {
grunt.initConfig({
log: {
t1: [1, 2, 3],
t2: 'hello world',
t3: false
}
});
grunt.registerMultiTask('log', 'Log stuff.', function() {
grunt.log.writeln(this.target + ': ' + this.data);
});
};
進入g1目錄,分別測試下
輸入 grunt,會依次執(zhí)行三個子任務(wù)t1,t2,t3
分別輸入 grunt log:t1, grunt log:t2, grunt log:t3
四、任務(wù)間通訊
在一個任務(wù)內(nèi)部可以調(diào)用另外一個任務(wù),如下
module.exports = function(grunt) {
grunt.registerTask('mytask', '一個最簡單的任務(wù)演示,根據(jù)參數(shù)打印不同的輸出.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln('任務(wù)' + this.name + ", 沒有傳參數(shù)");
} else if (arguments.length === 1) {
grunt.log.writeln('任務(wù)' + this.name + ", 有一個參數(shù)是" + arg1);
} else {
grunt.log.writeln('任務(wù)' + this.name + ", 有兩個參數(shù)分別是" + arg1 + ", " + arg2);
}
});
grunt.registerTask('default', '默認的任務(wù)', function() {
// 調(diào)用mytask
grunt.task.run('mytask:param1:param2')
})
};
進入命令行,輸入grunt
調(diào)用多個任務(wù),以逗號分隔傳給run方法即可,或者以數(shù)組形式
grunt.registerTask('default', '默認的任務(wù)', function() {
grunt.task.run('mytask1', 'mytask2')
// 或者
grunt.task.run(['mytask1', 'mytask2'])
})
- Node.js的項目構(gòu)建工具Grunt的安裝與配置教程
- 使用基于Node.js的構(gòu)建工具Grunt來發(fā)布ASP.NET MVC項目
- 學(xué)習(xí)使用grunt來打包JavaScript和CSS程序的教程
- 配置Grunt的Task時通配符支持和動態(tài)生成文件名問題
- Grunt入門教程(自動任務(wù)運行器)
- 詳解Grunt插件之LiveReload實現(xiàn)頁面自動刷新(兩種方案)
- 使用GruntJS構(gòu)建Web程序之合并壓縮篇
- 使用GruntJS構(gòu)建Web程序之構(gòu)建篇
- 使用GruntJS構(gòu)建Web程序之安裝篇
- 使用GruntJS鏈接與壓縮多個JavaScript文件過程詳解
- 使用Grunt.js管理你項目的應(yīng)用說明
- 基于Node.js的JavaScript項目構(gòu)建工具gulp的使用教程
相關(guān)文章
如何設(shè)置process.env.NODE_ENV生產(chǎn)環(huán)境模式
process.env.NODE_ENV默認只有兩種狀態(tài)即development和production,本文主要介紹了process.env.NODE_ENV設(shè)置生產(chǎn)環(huán)境模式,感興趣的可以了解一下2021-09-09Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請求的教程
Mock.js這個JavaScript庫最常見的用法便是被用來攔截AJAX請求,well,這里我們就來看一下Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請求的教程:2016-05-05nodejs教程之制作一個簡單的文章發(fā)布系統(tǒng)
本文主要講述了使用nodejs制作一個簡單的文章發(fā)布系統(tǒng),使用mongodb數(shù)據(jù)庫,時間比較緊,功能做的也比較簡單,僅僅是增刪改查,外加附近上傳,有相同需求的小伙伴可以參考下2014-11-11深入理解nodejs搭建靜態(tài)服務(wù)器(實現(xiàn)命令行)
這篇文章主要介紹了深入理解nodejs搭建靜態(tài)服務(wù)器(實現(xiàn)命令行),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02