原文鏈接：www.talkingcoder.com
什么是gulp
Gulp是可以自動(dòng)化執(zhí)行任務(wù)的工具。在平時(shí)開(kāi)發(fā)的流程里面，一定有一些動(dòng)作需要手工的重復(fù)的去執(zhí)行，比如:
- 把一個(gè)文件拷貝到另外一個(gè)位置
- 把多個(gè) JS 或者 CSS 文件合并成一個(gè)文件,以減少網(wǎng)絡(luò)請(qǐng)求數(shù)
- 對(duì)JS文件和CSS進(jìn)行合并壓縮,以減少網(wǎng)絡(luò)流量
- 把Sass或者Less文件編譯成CSS
- 壓縮圖像文件,以減少網(wǎng)絡(luò)流量
- 創(chuàng)建一個(gè)可以實(shí)時(shí)刷新頁(yè)面內(nèi)容的本地服務(wù)器等等。
只要你覺(jué)得有些動(dòng)作是要重復(fù)去做的，一般你就可以把這些動(dòng)作創(chuàng)建成一個(gè)gulp任務(wù)，然后在指定的條件下,比如文件發(fā)生變化以后,自動(dòng)去執(zhí)行這些任務(wù)。
gulp特點(diǎn)
- 易于使用 通過(guò)代碼優(yōu)于配置的策略，Gulp 讓簡(jiǎn)單的任務(wù)簡(jiǎn)單，復(fù)雜的任務(wù)可管理。
- 快速構(gòu)建 利用 node.js 流的威力，你可以快速構(gòu)建項(xiàng)目并減少頻繁的 IO 操作。前一級(jí)的輸出，直接變成后一級(jí)的輸入，使得在操作上非常簡(jiǎn)單
- 高質(zhì)量的插件 Gulp 嚴(yán)格的插件指南確保插件如你期望的那樣簡(jiǎn)潔地工作。
- 易于學(xué)習(xí) 通過(guò)最少的 API，掌握 Gulp 毫不費(fèi)力，構(gòu)建工作盡在掌握。
官方文檔解釋
Stream 是 nodejs 各種對(duì)象實(shí)現(xiàn)的抽象接口。
比如標(biāo)準(zhǔn)輸入是一個(gè)流，標(biāo)準(zhǔn)輸出也是一個(gè)流。
所有的 stream 對(duì)象都是 EventEmitter 的實(shí)例,可以發(fā)射事件。
流是一種有起點(diǎn)和終點(diǎn)的數(shù)據(jù)傳輸手段。
上一個(gè)的輸出，是下一個(gè)的輸入
上一個(gè)的輸出，是下一個(gè)的輸入
上一個(gè)的輸出，是下一個(gè)的輸入
gulp中的流
- gulp正是通過(guò)流和代碼優(yōu)于配置的策略來(lái)盡量簡(jiǎn)化任務(wù)編寫的工作。
- 類似jquery里的鏈?zhǔn)讲僮?，把各個(gè)方法串連起來(lái)構(gòu)建完整的任務(wù)。
- 用gulp編寫任務(wù)也可看作是用Node.js編寫任務(wù)。
- 當(dāng)使用流時(shí)，gulp不需要生成大量的中間文件，只將最后的輸出寫入磁盤，整個(gè)過(guò)程因此變得非常快。
安裝node
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器
安裝Gulp和相關(guān)行件用的都是node的包管理工具npm
所以你需要先在電腦上安裝 node,確定在命令行工具的下面可以使用npm這個(gè)命令，這樣就能去安裝Gulp了。
node.js官網(wǎng)
安裝好以后，我們可以打開(kāi)命令行工具，mac 用戶可以使用終端工具，windows 用戶可以找到cmd命令行工具。
安裝gulp
在項(xiàng)目里使用gulp需要
- 在全局范圍內(nèi)去安裝一下gulp的命令行工具
- 然后在項(xiàng)目里面再去本地安裝gulp
gulp 命令行工具
- 使用 npm install 去安裝 gulp，注意加上一個(gè) -g 的參數(shù)，表示在全局范圍內(nèi)去安裝.
- 一般用 npm 安裝的時(shí)候用一個(gè) -g 的參數(shù)就表示，這個(gè)安裝的東西會(huì)作為命令去執(zhí)行。
- 如果你在mac或linux下遇到了權(quán)限問(wèn)題,在下面這個(gè)命令的前面加上 sudo npm install gulp -g 并輸入mac密碼。
npm install -g gulp
安裝完成后可以輸入 gulp --help
如果輸出一些幫助的信息就表示可以gulp命令行成功安裝了
如果安裝不上可以換一下源試試
- 淘寶源
npm install -g gulp --registry=registry.npm.taobao.org - 中國(guó)源
npm install -g gulp --registry=[registry.cnpmjs.org] - 官方源
npm install -g gulp --registry=[www.npmjs.org/]
1. 先創(chuàng)建一個(gè)目錄
在 mac 和 linux 操作系統(tǒng)下執(zhí)行
mkdir learngulp
在 windows 操作系統(tǒng)下執(zhí)行
md learngulp
2. 使用 命令進(jìn)入此目錄
cd learngulp
3. 創(chuàng)建項(xiàng)目描述文件 package.json
npm，需要一個(gè)叫 package.json 的文件來(lái)管理依賴，可以手工去創(chuàng)建這個(gè)文件，也可以使用 npm init 這個(gè)命令。 輸入
npm init
輸入一些問(wèn)題答案
name: (zhufeng_automation) learngulp //項(xiàng)目名字，npm init會(huì)自動(dòng)取當(dāng)前目錄名作為默認(rèn)名字，這里不需要改，直接確認(rèn)即可
version: (1.0.0) 1.0.0 //項(xiàng)目版本號(hào)，這個(gè)大家按自己習(xí)慣來(lái)定就可以
description: learn gulp //項(xiàng)目說(shuō)明
entry point: (index.js) index.js // 入門文件 npm start 會(huì)執(zhí)行此文件
test command: test.js //測(cè)試腳本 npm test 會(huì)執(zhí)行此文件
git repository: (https://github/zhufengpeixun/zhufeng_automation.git) //模塊的git倉(cāng)庫(kù)，選填。npm的用戶一般都使用github做為自己的git倉(cāng)庫(kù)
keywords: node.js gulp //在npmjs官網(wǎng)搜索時(shí)的關(guān)鍵字
author: zhangrenyang //項(xiàng)目作者名字
license: (ISC) MIT //授權(quán)協(xié)議
About to write to D:\mygit\zhufeng_automation\package.json:
{
"name": "learngulp",
"version": "1.0.0",
"description": "learn gulp",
"main": "index.js",
"dependencies": {
"gulp": "^3.9.0"
},
"devDependencies": {},
"scripts": {
"test": "test.js"
},
"repository": {
"type": "git",
"url": "https://git.coding.net/zhufengpeixun/zhufeng_automation.git"
},
"keywords": [
"node.js",
"gulp"
],
"author": "zhangrenyang",
"license": "MIT"
}
Is this ok? (yes) yes //對(duì)以上內(nèi)容確認(rèn)無(wú)誤后，就可以直接回車確認(rèn)了
回車后會(huì)在當(dāng)前目錄下創(chuàng)建一個(gè) package.json 文件
這樣可以把 gulp 作為項(xiàng)目的開(kāi)發(fā)依賴(只在開(kāi)發(fā)時(shí)用，不會(huì)發(fā)布到線上)，通過(guò)
npm install gulp --save-dev
在node_modules下安裝本地的gulp庫(kù)并把添加配置到 package.json 文件里面。
"devDependencies": {
"gulp": "^3.9.0"
}
1.創(chuàng)建配置文件：
gulp 的任務(wù)要放到一個(gè)叫 gulpfile.js 的文件里面，先在項(xiàng)目的根目錄下面創(chuàng)建一個(gè)這樣的文件。 然后在這個(gè)文件的頂部添加下面這行代碼：
var gulp = require('gulp');
通過(guò)require可以把gulp模塊引入當(dāng)前項(xiàng)目并賦值給gulp變量
這樣，gulp 這個(gè)變量里面就會(huì)擁有 gulp 的所有的方法了
2.創(chuàng)建gulp的任務(wù)
可以使用gulp的task方法
同樣我們?nèi)?chuàng)建一個(gè)叫 hello 的任務(wù)，它要做的事就是在控制臺(tái)上輸出 "您好" 這兩個(gè)字
第一個(gè)參數(shù)是任務(wù)的名稱，第二個(gè)參數(shù)是任務(wù)的定義,是一個(gè)匿名函數(shù)
gulp.task('hello', function () {
console.log('您好');
});
執(zhí)行 Gulp 的任務(wù)，打開(kāi)命令行工具，進(jìn)入到項(xiàng)目所在的目錄，然后輸入：
gulp hello
會(huì)返回：
$ gulp hello
[21:36:34] Using gulpfile D:\mygit\zhufeng_automation\gulpfile.js
[21:36:34] Starting 'hello'...
您好
[21:36:34] Finished 'hello' after 959 μs
gulp后面跟著的是任務(wù)的名稱，不輸入任務(wù)名稱的話會(huì)默認(rèn)找default任務(wù)，找不到會(huì)報(bào)錯(cuò)
執(zhí)行其它任務(wù)
可以使用
gulp <task> <othertask>
gulp 只有你需要熟知的參數(shù)標(biāo)記，其他所有的參數(shù)標(biāo)記只在一些任務(wù)需要的時(shí)候使用。
- -v 或 --version 會(huì)顯示全局和項(xiàng)目本地所安裝的 gulp 版本號(hào)
- --gulpfile 手動(dòng)指定一個(gè) gulpfile 的路徑，這在你有很多個(gè) gulpfile 的時(shí)候很有用。這也會(huì)將 CWD 設(shè)置到該 gulpfile 所在目錄
- --cwd dirpath 手動(dòng)指定 CWD。定義 gulpfile 查找的位置，此外，所有的相應(yīng)的依賴（require）會(huì)從這里開(kāi)始計(jì)算相對(duì)路徑
- -T 或 --tasks 會(huì)顯示所指定 gulpfile 的 task 依賴樹(shù)
- --tasks-simple 會(huì)以純文本的方式顯示所載入的 gulpfile 中的 task 列表
- --color 強(qiáng)制 gulp 和 gulp 插件顯示顏色，即便沒(méi)有顏色支持
- --no-color 強(qiáng)制不顯示顏色，即便檢測(cè)到有顏色支持
- --silent 禁止所有的 gulp 日志
gulp.js工作方式
gulp的使用流程一般是：首先通過(guò)gulp.src()方法獲取到想要處理的文件流，
然后把文件流通過(guò)pipe方法導(dǎo)入到gulp的插件中，
最后把經(jīng)過(guò)插件處理后的流再通過(guò)pipe方法導(dǎo)入到gulp.dest()中，
gulp.dest()方法則把流中的內(nèi)容寫入到文件中。例如：
var gulp = require('gulp');
gulp.src('script/src.js') // 獲取文件的流的api
.pipe(gulp.dest('dist/dest.js')); // 寫文件的api
使用gulp，僅需知道4個(gè)API即可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch()，所以很容易就能掌握
gulp.src()
在Gulp中，使用的是Nodejs中的stream(流)，首先獲取到需要的stream，然后可以通過(guò)stream的pipe()方法把流導(dǎo)入到你想要的地方，比如Gulp的插件中，經(jīng)過(guò)插件處理后的流又可以繼續(xù)導(dǎo)入到其他插件中，當(dāng)然也可以把流寫入到文件中。所以Gulp是以stream為媒介的，它不需要頻繁的生成臨時(shí)文件，這也是Gulp的速度比Grunt快的一個(gè)原因。再回到正題上來(lái)，gulp.src()方法正是用來(lái)獲取流的，但要注意這個(gè)流里的內(nèi)容不是原始的文件流，而是一個(gè)虛擬文件對(duì)象流(Vinyl files)，這個(gè)虛擬文件對(duì)象中存儲(chǔ)著原始文件的路徑、文件名、內(nèi)容等信息，這個(gè)我們暫時(shí)不用去深入理解，你只需簡(jiǎn)單的理解可以用這個(gè)方法來(lái)讀取你需要操作的文件就行了。其語(yǔ)法為：
gulp.src(globs[, options])
globs參數(shù)是文件匹配模式(類似正則表達(dá)式)，用來(lái)匹配文件路徑(包括文件名)，當(dāng)然這里也可以直接指定某個(gè)具體的文件路徑。當(dāng)有多個(gè)匹配模式時(shí)，該參數(shù)可以為一個(gè)數(shù)組。
options為可選參數(shù)。通常情況下我們不需要用到
glob語(yǔ)法
gulp內(nèi)部使用了node-glob模塊來(lái)實(shí)現(xiàn)其文件匹配功能。我們可以使用下面這些特殊的字符來(lái)匹配我們想要的文件：
[圖片上傳失敗...(image-131e3-1531969756686)]
下面以例子來(lái)加深理解
glob匹配
gulp.dest()
gulp.dest()方法是用來(lái)寫文件的，其語(yǔ)法為：
gulp.dest(path[,options])
path為寫入文件的路徑
options為一個(gè)可選的參數(shù)對(duì)象，通常我們不需要用到
要想使用好gulp.dest()這個(gè)方法，就要理解給它傳入的路徑參數(shù)與最終生成的文件的關(guān)系。
gulp的使用流程一般是這樣子的：首先通過(guò)gulp.src()方法獲取到我們想要處理的文件流，
然后把文件流通過(guò)pipe方法導(dǎo)入到gulp的插件中，最后把經(jīng)過(guò)插件處理后的流再通過(guò)pipe方法導(dǎo)入到gulp.dest()中，
gulp.dest()方法則把流中的內(nèi)容寫入到文件中，
這里首先需要弄清楚的一點(diǎn)是，我們給gulp.dest()傳入的路徑參數(shù)，只能用來(lái)指定要生成的文件的目錄，
而不能指定生成文件的文件名，它生成文件的文件名使用的是導(dǎo)入到它的文件流自身的文件名，
所以生成的文件名是由導(dǎo)入到它的文件流決定的，即使我們給它傳入一個(gè)帶有文件名的路徑參數(shù)，
然后它也會(huì)把這個(gè)文件名當(dāng)做是目錄名，例如：
var gulp = require('gulp');
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foo.js'));
//最終生成的文件路徑為 dist/foo.js/jquery.js,而不是dist/foo.js
要想改變文件名，可以使用插件 gulp-rename
下面說(shuō)說(shuō)生成的文件路徑與我們給gulp.dest()方法傳入的路徑參數(shù)之間的關(guān)系。
gulp.dest(path)生成的文件路徑是我們傳入的path參數(shù)后面再加上gulp.src()中有通配符開(kāi)始出現(xiàn)的那部分路徑。例如：
var gulp = reruire('gulp');
//有通配符開(kāi)始出現(xiàn)的那部分路徑為 `**/*.js`
gulp.src('script/**/*.js')
.pipe(gulp.dest('dist')); //最后生成的文件路徑為 dist/**/*.js
//如果 **/*.js 匹配到的文件為 jquery/jquery.js ,則生成的文件路徑為 dist/jquery/jquery.js
再舉更多一點(diǎn)的例子
gulp.src('script/avalon/avalon.js') //沒(méi)有通配符出現(xiàn)的情況
.pipe(gulp.dest('dist')); //最后生成的文件路徑為 dist/avalon.js
//有通配符開(kāi)始出現(xiàn)的那部分路徑為 **/underscore.js
gulp.src('script/**/underscore.js')
//假設(shè)匹配到的文件為script/util/underscore.js
.pipe(gulp.dest('dist')); //則最后生成的文件路徑為 dist/util/underscore.js
gulp.src('script/*') //有通配符出現(xiàn)的那部分路徑為 *
//假設(shè)匹配到的文件為script/zepto.js
.pipe(gulp.dest('dist')); //則最后生成的文件路徑為 dist/zepto.js
通過(guò)指定gulp.src()方法配置參數(shù)中的base屬性，我們可以更靈活的來(lái)改變gulp.dest()生成的文件路徑。
當(dāng)我們沒(méi)有在gulp.src()方法中配置base屬性時(shí)，base的默認(rèn)值為通配符開(kāi)始出現(xiàn)之前那部分路徑，例如：
gulp.src('app/src/**/*.css') //此時(shí)base的值為 app/src
上面我們說(shuō)的gulp.dest()所生成的文件路徑的規(guī)則，其實(shí)也可以理解成，用我們給gulp.dest()傳入的路徑替換掉gulp.src()中的base路徑，最終得到生成文件的路徑。
gulp.src('app/src/**/*.css') //此時(shí)base的值為app/src,也就是說(shuō)它的base路徑為app/src
//設(shè)該模式匹配到了文件 app/src/css/normal.css
.pipe(gulp.dest('dist')) //用dist替換掉base路徑，最終得到 dist/css/normal.css
所以改變base路徑后，gulp.dest()生成的文件路徑也會(huì)改變
gulp.src(script/lib/*.js) //沒(méi)有配置base參數(shù)，此時(shí)默認(rèn)的base路徑為script/lib
//假設(shè)匹配到的文件為script/lib/jquery.js
.pipe(gulp.dest('build')) //生成的文件路徑為 build/jquery.js
gulp.src(script/lib/*.js, {base:'script'}) //配置了base參數(shù)，此時(shí)base路徑為script
//假設(shè)匹配到的文件為script/lib/jquery.js
.pipe(gulp.dest('build')) //此時(shí)生成的文件路徑為 build/lib/jquery.js
用gulp.dest()把文件流寫入文件后，文件流仍然可以繼續(xù)使用。
gulp.task()
gulp.task方法用來(lái)定義任務(wù)，其語(yǔ)法為：
gulp.task(name[, deps], fn)
name 為任務(wù)名
deps 是當(dāng)前定義的任務(wù)需要依賴的其他任務(wù)，為一個(gè)數(shù)組。當(dāng)前定義的任務(wù)會(huì)在所有依賴的任務(wù)執(zhí)行完畢后才開(kāi)始執(zhí)行。如果沒(méi)有依賴，則可省略這個(gè)參數(shù)
fn 為任務(wù)函數(shù)，我們把任務(wù)要執(zhí)行的代碼都寫在里面。該參數(shù)也是可選的。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定義一個(gè)有依賴的任務(wù)
// Do something
});
gulp.task()這個(gè)API沒(méi)什么好講的，但需要知道執(zhí)行多個(gè)任務(wù)時(shí)怎么來(lái)控制任務(wù)執(zhí)行的順序。
gulp中執(zhí)行多個(gè)任務(wù)，可以通過(guò)任務(wù)依賴來(lái)實(shí)現(xiàn)。例如我想要執(zhí)行one,two,three這三個(gè)任務(wù)，那我們就可以定義一個(gè)空的任務(wù)，然后把那三個(gè)任務(wù)當(dāng)做這個(gè)空的任務(wù)的依賴就行了：
//只要執(zhí)行default任務(wù)，就相當(dāng)于把one,two,three這三個(gè)任務(wù)執(zhí)行了
gulp.task('default',['one','two','three']);
如果任務(wù)相互之間沒(méi)有依賴，任務(wù)會(huì)按你書寫的順序來(lái)執(zhí)行，如果有依賴的話則會(huì)先執(zhí)行依賴的任務(wù)。
但是如果某個(gè)任務(wù)所依賴的任務(wù)是異步的，就要注意了，gulp并不會(huì)等待那個(gè)所依賴的異步任務(wù)完成，而是會(huì)接著執(zhí)行后續(xù)的任務(wù)。例如：
gulp.task('one',function(){
//one是一個(gè)異步執(zhí)行的任務(wù)
setTimeout(function(){
console.log('one is done')
},5000);
});
//two任務(wù)雖然依賴于one任務(wù),但并不會(huì)等到one任務(wù)中的異步操作完成后再執(zhí)行
gulp.task('two',['one'],function(){
console.log('two is done');
});
上面的例子中我們執(zhí)行two任務(wù)時(shí)，會(huì)先執(zhí)行one任務(wù)，但不會(huì)去等待one任務(wù)中的異步操作完成后再執(zhí)行two任務(wù)，而是緊接著執(zhí)行two任務(wù)。所以two任務(wù)會(huì)在one任務(wù)中的異步操作完成之前就執(zhí)行了。
那如果我們想等待異步任務(wù)中的異步操作完成后再執(zhí)行后續(xù)的任務(wù)，該怎么做呢？
有三種方法可以實(shí)現(xiàn)：
第一：在異步操作完成后執(zhí)行一個(gè)回調(diào)函數(shù)來(lái)通知gulp這個(gè)異步任務(wù)已經(jīng)完成,這個(gè)回調(diào)函數(shù)就是任務(wù)函數(shù)的第一個(gè)參數(shù)。
gulp.task('one',function(cb){ //cb為任務(wù)函數(shù)提供的回調(diào)，用來(lái)通知任務(wù)已經(jīng)完成
//one是一個(gè)異步執(zhí)行的任務(wù)
setTimeout(function(){
console.log('one is done');
cb(); //執(zhí)行回調(diào)，表示這個(gè)異步任務(wù)已經(jīng)完成
},5000);
});
//這時(shí)two任務(wù)會(huì)在one任務(wù)中的異步操作完成后再執(zhí)行
gulp.task('two',['one'],function(){
console.log('two is done');
});
第二：定義任務(wù)時(shí)返回一個(gè)流對(duì)象。適用于任務(wù)就是操作gulp.src獲取到的流的情況。
gulp.task('one',function(cb){
var stream = gulp.src('client/**/*.js')
.pipe(dosomething()) //dosomething()中有某些異步操作
.pipe(gulp.dest('build'));
return stream;
});
gulp.task('two',['one'],function(){
console.log('two is done');
});
第三：返回一個(gè)promise對(duì)象，例如
var Q = require('q'); //一個(gè)著名的異步處理的庫(kù) https://github.com/kriskowal/q
gulp.task('one',function(cb){
var deferred = Q.defer();
// 做一些異步操作
setTimeout(function() {
deferred.resolve();
}, 5000);
return deferred.promise;
});
gulp.task('two',['one'],function(){
console.log('two is done');
});
gulp.task()就這些了，主要是要知道當(dāng)依賴是異步任務(wù)時(shí)的處理。
gulp.watch()
gulp.watch()用來(lái)監(jiān)視文件的變化，當(dāng)文件發(fā)生變化后，我們可以利用它來(lái)執(zhí)行相應(yīng)的任務(wù)，例如文件壓縮等。其語(yǔ)法為
gulp.watch(glob[, opts], tasks)
glob 為要監(jiān)視的文件匹配模式，規(guī)則和用法與gulp.src()方法中的 glob 相同。
opts 為一個(gè)可選的配置對(duì)象，通常不需要用到
tasks 為文件變化后要執(zhí)行的任務(wù)，為一個(gè)數(shù)組
gulp.task('uglify',function(){
//do something
});
gulp.task('reload',function(){
//do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);
gulp.watch()還有另外一種使用方式：
gulp.watch(glob[, opts, cb])
glob和 opts 參數(shù)與第一種用法相同
cb參數(shù)為一個(gè)函數(shù)。每當(dāng)監(jiān)視的文件發(fā)生變化時(shí)，就會(huì)調(diào)用這個(gè)函數(shù),并且會(huì)給它傳入一個(gè)對(duì)象，該對(duì)象包含了文件變化的一些信息，type屬性為變化的類型，可以是 added , changed , deleted ； path 屬性為發(fā)生變化的文件的路徑
gulp.watch('js/**/*.js', function(event){
console.log(event.type); //變化類型 added為新增,deleted為刪除，changed為改變
console.log(event.path); //變化的文件的路徑
});
1. 導(dǎo)入gulp
打開(kāi) gulpfile.js ，在這里先去創(chuàng)建一個(gè)對(duì)象，叫 gulp ，讓它等于 require('gulp');
這樣這個(gè) gulp 對(duì)象就擁有了 gulp 提供的所有屬性還有方法了。
2. 創(chuàng)建源文件
mkdir app
在app下創(chuàng)建 index.html
3. 任務(wù)目標(biāo)
然后用 gulp 的 task 方法，去創(chuàng)建一個(gè)任務(wù)，
這個(gè)任務(wù)要做的事就是把我們項(xiàng)目里的app下的index.html 這個(gè)文件，復(fù)制到一個(gè)叫 dist 的目錄里面，這個(gè) dist 目錄表示的是 distribution,也就是正式發(fā)新版。
4. 編寫任務(wù)
- 先給這個(gè)任務(wù)起個(gè)名字 ... 可以叫它 copy-html
- 再寫一個(gè)匿名函數(shù)
- 先用寫 return
- 大部分的 gulp 任務(wù)，首先要做的就是去讀取要處理的文件,讀取文件用的是 src 這個(gè)方法,在這個(gè)方法里，指定一下要讀取的文件 index.html
找到要處理的文件以后，再用一個(gè) pipe方法，你可以把這個(gè) pipe 想像成是一個(gè)管道， 把文件讀取進(jìn)來(lái)，放到一個(gè)管道里，在這個(gè)管道里面，你可以使用 gulp 的插件去處理讀取進(jìn)來(lái)的文件
因?yàn)檫@里我們只是簡(jiǎn)單的把文件保存到一個(gè)指定的地方，所以不需要使用插件，可以使用 gulp 的 dest 這個(gè)方法，在這個(gè)方法里，指定一下文件要存儲(chǔ)到的那個(gè)位置。
這樣我們就創(chuàng)建好了這個(gè)把單個(gè)文件復(fù)制到指定位置的任務(wù)
5. 執(zhí)行
打開(kāi)命令行工具
先確定當(dāng)前的位置是在項(xiàng)目的目錄里面
然后輸入 gulp+后面加上任務(wù)的名字
gulp copy-html
輸入回車，會(huì)出現(xiàn)一些提示：
- 使用的 gulpfile 的位置
- 開(kāi)始執(zhí)行的任務(wù)
- 還有任務(wù)結(jié)束所花的時(shí)間
代碼
var gulp = require('gulp');
gulp.task('copy-html',function(){
return gulp.src('app/index.html').pipe(gulp.dest('dist'));
});
1. 導(dǎo)入gulp
打開(kāi) gulpfile.js ，在這里先去創(chuàng)建一個(gè)對(duì)象，叫 gulp ，讓它等于 require('gulp');
這樣這個(gè) gulp 對(duì)象就擁有了 gulp 提供的所有屬性和方法了。
2. 創(chuàng)建源文件
在app下創(chuàng)建
[圖片上傳失敗...(image-b235d5-1531969756685)]
3. 任務(wù)目標(biāo)
然后用gulp的task方法,去創(chuàng)建一個(gè)任務(wù)，
把imgs目錄里的文件復(fù)制到dist這個(gè)目錄的下面
4. 編寫任務(wù)
- 先給這個(gè)任務(wù)起個(gè)名字 ... 可以叫它 copy-imgs
- 再寫一個(gè)匿名函數(shù)
- 先寫 return
- 大部分的 gulp 任務(wù)，首先要做的就是去讀取要處理的文件,讀取文件用的是 src 這個(gè)方法
'app/imgs/*.png' 指app/imgs/這個(gè)目錄里面的所有的.png格式的圖片,這個(gè) * 號(hào)表示的就是任何東西. *.png 意思就是，不管圖片的文件名是什么，只要它是 .png 格式的就行.
gulp.src('app/imgs/*.png')
5. 執(zhí)行
打開(kāi)命令行工具
先確定當(dāng)前的位置是在項(xiàng)目的目錄里面
然后輸入 gulp+后面加上任務(wù)的名字
gulp copy-imgs
輸入回車，會(huì)出現(xiàn)一些提示：
- 使用的 gulpfile 的位置
- 開(kāi)始執(zhí)行的任務(wù)
- 還有任務(wù)結(jié)束所花的時(shí)間
完成以后，你會(huì)看到，在項(xiàng)目的dist這個(gè)目錄里面，會(huì)創(chuàng)建一個(gè)叫imgs的目錄,在這個(gè)目錄里面，有兩張圖片1.png 2.png它們都是從項(xiàng)目根目錄下的imgs這個(gè)目錄里面復(fù)制過(guò)來(lái)的.
在這個(gè)目錄里面，這張jpg格式的圖片，還有small里面的圖片，并沒(méi)有復(fù)制到dist下面的 imgs 目錄里面。因?yàn)槲覀儗懙膅lob只匹配imgs目錄下的所有的.png格式的圖片
6.指定多個(gè)后綴
如果你想把 imgs 目錄下面的所有的圖像文件都復(fù)制到 dist 下面的 imgs 目錄里面，在這個(gè) src 方法的 glob 里面，可以指定多個(gè)擴(kuò)展名,現(xiàn)在是 *.png, 后面加上一組花括號(hào),在這個(gè)花括號(hào)里面，指定多個(gè)擴(kuò)展名.{jpg,png}注意逗號(hào)的后面不要使用空格.
多個(gè)glob
有些任務(wù)你可能需要用到多個(gè)glob，這樣我們就可以用一個(gè)數(shù)組，數(shù)組里的每個(gè)項(xiàng)目表示的就是用來(lái)匹配文件的glob。
比如我們的項(xiàng)目里有兩個(gè)目錄，css還有js。
每個(gè)目錄下面都有一些文件。
我們想創(chuàng)建一個(gè)任務(wù)，需要用到這兩個(gè)目錄里面的東西。
在這個(gè)任務(wù)里，我們就可以使用多個(gè)glob。
['app/css/*.css','app/js/*.js']
數(shù)組里有兩個(gè)glob
再次執(zhí)行任務(wù)
會(huì)發(fā)現(xiàn)glob中的文件都拷貝到dist下面去了
排除特定文件
在 glob 的前面，再加上一個(gè)!號(hào)，表示這是要排除掉的文件
['app/css/*.css','app/js/*.js','!app/js/*.tmp.js']
代碼
var gulp = require('gulp');
/**
* 復(fù)制圖片
*/
gulp.task('copy-images',function(){
return gulp.src('app/imgs/*.jpg').pipe(gulp.dest('dist'));
});
/**
* 1\. {} 里可以指定多個(gè)擴(kuò)展名
* 2\. * 匹配所有的字符，除了路徑分隔符 /
* 3\. ** 匹配所有的字符，包括路徑分隔符 /
*/
gulp.task('copy-images',function(){
return gulp.src('app/imgs/**/*.{jpg,png}').pipe(gulp.dest('dist'));
});
/**
* 匹配多個(gè)目錄 glob
* 可以填寫一個(gè)數(shù)組
*
*/
gulp.task('copy-other',function(){
return gulp.src(['app/css/*.css','app/js/*.js'],{base:'app'}).pipe(gulp.dest('dist'));
});
/**
* 匹配多個(gè)目錄 glob
* ! 排除一個(gè)文件
*
*/
gulp.task('copy-other',function(){
return gulp.src(['app/css/*.css','app/js/*.js','!app/js/*.tmp.js'],{base:'app'}).pipe(gulp.dest('dist'));
});
1. 組合任務(wù)
在創(chuàng)建 gulp 任務(wù)的時(shí)候，我們可以去給任務(wù)指定它依賴的其它的任務(wù)。
比如，這里我們創(chuàng)建了三個(gè)任務(wù)，copy-html，copy-imgs，copy-other。
我們想再創(chuàng)建一個(gè)叫 build 的任務(wù)，這個(gè)任務(wù)依賴這里的這三個(gè)任務(wù)。
2. 編寫
使用gulp的task這個(gè)方法去創(chuàng)建任務(wù)
先給這個(gè)任務(wù)起個(gè)名字,叫做 build.
再把這個(gè)方法的第二個(gè)參數(shù)設(shè)置成一個(gè)數(shù)組,這個(gè)數(shù)組里的項(xiàng)目就是這個(gè)任務(wù)所依賴的任務(wù),輸入一組方括號(hào),再把它需要的三個(gè)任務(wù)，作為這個(gè)數(shù)組的三個(gè)項(xiàng)目.
我們可以繼續(xù)去設(shè)計(jì)這個(gè)任務(wù)要作的事情，用一個(gè)匿名函數(shù),
可以讓它在控制臺(tái)上輸出 編譯成功 ,這樣在執(zhí)行 build 任務(wù)的時(shí)候，會(huì)先去執(zhí)行它依賴的三個(gè)任務(wù)，最后再執(zhí)行它本身要做的任務(wù)。
3. 執(zhí)行
保存,打開(kāi)命令行工具,輸入 gulp build,回車.
注意這里會(huì)同時(shí)去執(zhí)行 build 需要的三個(gè)任務(wù)，并不是先執(zhí)行一個(gè)，等待完成以后再去執(zhí)行一個(gè)，
這些依賴的任務(wù)是同時(shí)執(zhí)行的,等它們都完成以后，才會(huì)執(zhí)行 build 本身要做的任務(wù)，這里就是在控制臺(tái)上，輸出編譯成功 這幾個(gè)字兒。
代碼
var gulp = require('gulp');
gulp.task('copy-html',function(){
return gulp.src('app/index.html').pipe(gulp.dest('dist'));
});
gulp.task('copy-images',function(){
return gulp.src('app/imgs/**/*.{jpg,png}').pipe(gulp.dest('dist'));
});
/**
* 匹配多個(gè)目錄 glob
* ! 排除一個(gè)文件
*
*/
gulp.task('copy-other',function(){
return gulp.src(['app/css/*.css','app/js/*.js','app/js/*.tmp.js'],{base:'app'}).pipe(gulp.dest('dist'));
});
gulp.task('default',['copy-html','copy-images','copy-other'],function(){
console.log('全部拷貝任務(wù)執(zhí)行完畢!');
});
1. 監(jiān)聽(tīng)任務(wù)
使用 gulp 的 watch 這個(gè)方法，我們可以去監(jiān)視一些文件，當(dāng)這些文件發(fā)生變化的時(shí)候，立即去執(zhí)行一些指定的任務(wù)
2.編寫
先打開(kāi) gulpfile.js,再去創(chuàng)建一個(gè)任務(wù)
gulp.task,這個(gè)任務(wù)可以叫做 watch,再用一個(gè)匿名函數(shù),在它里面，再用 gulp 的 watch 方法去做點(diǎn)事情。
輸入 gulp.watch(),先指定一下要監(jiān)視的文件,比如去監(jiān)視 index.html
再把要執(zhí)行的任務(wù)列表放到這里，這個(gè)任務(wù)列表要放到一個(gè)數(shù)組里，所以先輸入一組方括號(hào)，要執(zhí)行的任務(wù)是 copy-html.
它的意思就是，我們?cè)趫?zhí)行 watch 任務(wù)的時(shí)候，去監(jiān)視 index.html 這個(gè)文件的變化，當(dāng)這個(gè)文件發(fā)生變化以后，就去自動(dòng)執(zhí)行 copy-html 這個(gè)任務(wù)。
執(zhí)行
保存 回到命令行工具
先去執(zhí)行一下剛才創(chuàng)建的 watch 這個(gè)任務(wù) gulp watch ,這樣 gulp 就會(huì)去監(jiān)視文件的變化了,你會(huì)看到這個(gè)任務(wù)并沒(méi)有立即結(jié)束,它會(huì)一直運(yùn)行,直到我們手工退出這個(gè)任務(wù),退出可以按一上 ctrl + C
再回到項(xiàng)目,打開(kāi) index.html 這個(gè)文件,隨便修改一個(gè)地方,然后保存一下,回到命令行,你會(huì)看到 gulp 執(zhí)行了 copy-html 這個(gè)任務(wù)，因?yàn)?index.html 這個(gè)文件發(fā)生了變化
每次保存被監(jiān)視的文件，都會(huì)去執(zhí)行指定的任務(wù)列表。
回到項(xiàng)目，打開(kāi) dist 下面的 index.html,你會(huì)看到修改之后的 index.html 已經(jīng)被復(fù)制到了這個(gè)目錄的下面.
代碼
var gulp = require('gulp');
gulp.task('copy-html',function(){
return gulp.src('app/index.html').pipe(gulp.dest('dist'));
});
gulp.task('copy-images',function(){
return gulp.src('app/imgs/**/*.{jpg,png}',{base:'app'}).pipe(gulp.dest('dist'));
});
/**
* 匹配多個(gè)目錄 glob
* ! 排除一個(gè)文件
*
*/
gulp.task('copy-other',function(){
return gulp.src(['app/css/*.css','app/js/*.js','app/js/*.tmp.js'],{base:'app'}).pipe(gulp.dest('dist'));
});
//在執(zhí)行watch的時(shí)候會(huì)監(jiān)控index.html文件的變化，發(fā)生變化后可以執(zhí)行拷貝html的任務(wù)
gulp.task('default',function(){
gulp.watch('app/index.html',['copy-html']);
gulp.watch('app/imgs/**/*.{jpg,png}',['copy-images']);
gulp.watch(['app/css/*.css','app/js/*.js','app/js/*.tmp.js'],['copy-other']);
});
gulp插件
gulp提供了一些很實(shí)用的接口，但本身并不能做太多的事情。
可以讀取文件、寫入文件以及監(jiān)控文件等一少部分功能。
其它實(shí)用的功能都是依靠插件來(lái)進(jìn)行擴(kuò)展的。
這些插件可以實(shí)現(xiàn)比如
- 編譯 Sass：gulp-sass
- 編譯 Less：gulp-less
- 合并文件：gulp-concat
- 壓縮js 文件：gulp-uglify
- 重命名js文件：gulp-rename
- 優(yōu)化圖像大小：gulp-imagemin
- 壓縮css 文件：gulp-minify-css
- 創(chuàng)建本地服務(wù)器：gulp-connect
- 實(shí)時(shí)預(yù)覽 gulp-connect
插件列表
使用插件
1. npm install xxx --save-dev 安裝插件
2. 在 **gulpfile.js** 頂部引入此插件
3. 在創(chuàng)建任務(wù)的時(shí)候使用此插件
自動(dòng)加載gulp 插件
gulp-load-plugins這個(gè)插件能自動(dòng)幫你加載package.json文件里的gulp插件。
例如假設(shè)你的package.json文件里的依賴是這樣的:
"devDependencies": {
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-imagemin": "^2.3.0",
}
然后我們可以在gulpfile.js中使用gulp-load-plugins來(lái)幫我們加載插件：
var gulp = require('gulp');
//加載gulp-load-plugins插件，并馬上運(yùn)行它
var $ = require('gulp-load-plugins')();
然后我們要使用gulp-rename和gulp-ruby-sass這兩個(gè)插件的時(shí)候，
就可以使用.concat和.connect來(lái)代替了,也就是原始插件名去掉gulp-前綴，之后再轉(zhuǎn)換為駝峰命名。
less
less插件可以把less文件編譯成css
less任務(wù)
可以在app/less下面創(chuàng)建文件page.less,然后就可以把此文件編譯到dist下面
安裝插件
npm install gulp-less --save-dev
安裝后可以在node-modules里看到此插件
也可以在package.json的devDependencies里面看到此插件的配置
代碼如下
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less',function(){
return gulp.src('app/less/*.less').pipe(less()).pipe(gulp.dest('dist/css'));
});
gulp.task('default',['less']);
sass
想要使用 Gulp 去把 Sass 編譯成 CSS ，我們可以使用 gulp-sass 這個(gè)插件。
插件任務(wù)
可以在app/sass下面創(chuàng)建文件base.scss,然后就可以把此文件編譯到dist下面
安裝插件
npm install gulp-sass --save-dev
安裝后可以在node-modules里看到此插件
也可以在package.json的devDependencies里面看到此插件的配置 "gulp-sass": "^2.0.4"
使用插件
在項(xiàng)目里面，app/sass 這個(gè)目錄的下面，有一個(gè)sass文件，就是這個(gè)base.scss
$blue : #1875e7;
div {
color : $blue;
}
下面，我們可以使用gulp-sass這個(gè)插件，把這個(gè)目錄里面的sass文件編譯成css ，
再放到 dist 目錄下面的 css 這個(gè)目錄的下面。
代碼如下
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass',function(){
return gulp.src('app/sass/*.scss').pipe(sass()).pipe(gulp.dest('dist/css'));
});
gulp.task('default',['sass']);
gulp-connect
有些時(shí)候我們需要把文件放到本地服務(wù)器上去預(yù)覽，gulp-connect可以幫我們創(chuàng)建一個(gè)本地服務(wù)器去運(yùn)行我們的項(xiàng)目
安裝插件
npm install gulp-connect --save-dev
加上一個(gè) --save-dev，把這個(gè)插件放到開(kāi)發(fā)依賴?yán)锩妗?/p>
創(chuàng)建任務(wù)
打開(kāi) gulpfile.js
先在文件的頂部這里
去包含一下這個(gè) gulp-connect 插件
給它起個(gè)名字connect ...
var connect = require('gulp-connect');
代碼如下
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('server',function(){
connect.server({
root:'dist',//服務(wù)器的根目錄
port:8080 //服務(wù)器的地址，沒(méi)有此配置項(xiàng)默認(rèn)也是 8080
});
});
gulp.task('default',['server']); //運(yùn)行此任務(wù)的時(shí)候會(huì)在8080上啟動(dòng)服務(wù)器，
gulp-connect
我們希望當(dāng)文件變化的時(shí)候?yàn)g覽器可以自動(dòng)刷新，這樣我們就不需要文件修改后手動(dòng)去刷新瀏覽器了
代碼如下
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('copy-html',function(){
gulp.src('app/index.html')//指定源文件
.pipe(gulp.dest('dist'))//拷貝到dist目錄
.pipe(connect.reload());//通知瀏覽器重啟
});
gulp.task('watch',function(){
gulp.watch('app/index.html',['copy-html']);//當(dāng)index.html文件變化時(shí)執(zhí)行copy-html任務(wù)
});
gulp.task('server',function(){
connect.server({
root:'dist',//服務(wù)器的根目錄
port:8080, //服務(wù)器的地址，沒(méi)有此配置項(xiàng)默認(rèn)也是 8080
livereload:true//啟用實(shí)時(shí)刷新的功能
});
});
gulp.task('default',['server','watch']);//運(yùn)行此任務(wù)的時(shí)候會(huì)在8080上啟動(dòng)服務(wù)器，
gulp-concat
這個(gè)插件可以把幾個(gè)文件合并到一塊
安裝
npm install gulp-concat --save-dev
代碼如下
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('concat',function(){
return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])//指定要合并的文件glob
.pipe(concat('app.js'))//進(jìn)行合并并指定合并后的文件名
.pipe(gulp.dest('dist/js'));//輸出到目標(biāo)路徑
});
gulp.task('default',['concat']);
gulp-concat
合并后我們可以對(duì)JS文件進(jìn)行合并，最小化處理
安裝
先打開(kāi)命令行安裝
npm install gulp-uglify --save-dev
代碼如下
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify')
gulp.task('uglify',function(){
return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
.pipe(concat('app.js')) //把多個(gè)JS文件合并成一個(gè)文件
.pipe(uglify()) //對(duì)合并后的app.js文件進(jìn)行壓縮
.pipe(gulp.dest('dist/js')); //輸出到目的地
});
gulp.task('default',['uglify']);
html文件壓縮
gulp-minify-html插件用來(lái)壓縮html文件。
代碼如下
var gulp = require('gulp'),
minifyHtml = require("gulp-minify-html");
gulp.task('minify-html', function () {
gulp.src('src/*.html') // 要壓縮的html文件
.pipe(minifyHtml()) //壓縮
.pipe(gulp.dest('dist/html'));//輸出到目的地
});
gulp-rename
在把處理好的文件存放到指定的位置之前，我們可以先去重新命名一下它。可以使用gulp-rename這個(gè)插件.
安裝
npm install gulp-rename --save-dev
代碼如下
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('uglify',function(){
return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])//指定要處理的文件
.pipe(concat('app.js'))//合并成一個(gè)文件
.pipe(gulp.dest('dist/js'))//保存此文件
.pipe(uglify())//進(jìn)行壓縮
.pipe(rename('app.min.js'))//對(duì)此文件進(jìn)行重命名
.pipe(gulp.dest('dist/js'));//再輸出一次
});
gulp.task('default',['uglify']);
gulp-minify-css
如果要想壓縮css,我們可以使用gulp-minify-css
安裝
npm install gulp-minify-css --save-dev
代碼如下
var gulp = require('gulp');
var less = require('gulp-less');
var minify = require('gulp-minify-css');//在文件的頂部去包含這個(gè)插件，起個(gè)名字，叫做 minify
var rename = require('gulp-rename');
gulp.task('minify',function(){
return gulp.src('app/less/page.less')//指定 less文件
.pipe(less())//把less編譯成css
.pipe(gulp.dest('dist/css'))//輸出到目的地
.pipe(minify())//對(duì) css再進(jìn)行壓縮
.pipe(rename('page.min.css'))//重命名
.pipe(gulp.dest('dist/css'));//輸出到目的地
});
gulp.task('default',['less']);
gulp-imagemin
如果要想在保證不改變圖像質(zhì)量的情況下，讓圖像文件的體積變得更小一點(diǎn),我們可以使用gulp-imagemin
安裝
npm install gulp-imagemin --save-dev
代碼如下
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('copy-images',function(){
return gulp.src('app/imgs/**/*.{jpg,png}')//指定要壓縮的圖片
.pipe(imagemin()) //進(jìn)行圖片壓縮
.pipe(gulp.dest('dist'));//輸出目的地
});
gulp.task('default',['copy-images']);
jshint
可以用此插件進(jìn)行代碼檢查
安裝
npm install gulp-jshint --save-dev
代碼
var gulp = require('gulp'),
jshint = require("gulp-jshint");
gulp.task('jsLint', function () {
gulp.src('src/*.js')
.pipe(jshint()) //進(jìn)行代碼檢查
.pipe(jshint.reporter()); // 輸出檢查結(jié)果
});
DEMO :
{
"name": "tongbanke",
"version": "1.0.0",
"description": "tobanke'",
"main": "main.js",
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": "gulp"
},
"keywords": [
"gulp",
"test"
],
"author": "kongzhi",
"license": "ISC",
"devDependencies": {
"gulp": "^3.6.2",
"gulp-coffee": "^1.4.2",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.3.1",
"gulp-jshint": "^2.0.4",
"gulp-less": "^3.1.0",
"gulp-obfuscate": "^0.2.9",
"gulp-uglify": "^2.0.0",
"gulp-watch": "^0.6.2",
"jshint": "^2.9.3"
}
}
var gulp = require('gulp');
var concat = require('gulp-concat'); //文件合并
var uglify = require('gulp-uglify'); //文件壓縮
var rename = require('gulp-rename'); //文件重命名
var obfuscate = require('gulp-obfuscate'); //代碼混淆
var connect = require('gulp-connect'); //創(chuàng)建一個(gè)本地服務(wù)器
jshint = require("gulp-jshint"); //語(yǔ)法校驗(yàn)
// 語(yǔ)法檢查
gulp.task('jshint', function() {
console.log('語(yǔ)法檢查...');
return gulp.src('src/*.js')
.pipe(jshint()) //進(jìn)行代碼檢查
.pipe(jshint.reporter('default')); // 輸出檢查結(jié)果
});
//創(chuàng)建一個(gè)本地服務(wù)器
gulp.task('server',function(){
console.log("創(chuàng)建本地服務(wù)器！")
connect.server({
livereload:true,//啟用實(shí)時(shí)刷新的功能
root:'./',//服務(wù)器的根目錄
port:12306 //服務(wù)器的地址，沒(méi)有此配置項(xiàng)默認(rèn)也是 8080
});
});
// 合并文件之后壓縮代碼
gulp.task('minify', function() {
console.log('壓縮合并');
return gulp.src('src/*.js') //指定要合并的文件glob
.pipe(concat('main.js')) //進(jìn)行合并并指定合并后的文件名
.pipe(gulp.dest('min.js')) //輸出到目標(biāo)路徑
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(connect.reload()) //通知瀏覽器重啟
.pipe(gulp.dest('min.js'));
});
// 監(jiān)視文件的變化
gulp.task('watch', function() {
console.log('文件有變動(dòng)');
gulp.watch('src/*.js', ['minify','jshint'],function(event){
console.log(event.type); //變化類型 added為新增,deleted為刪除，changed為改變
console.log(event.path); //變化的文件的路徑
});
});
// 注冊(cè)默認(rèn)任務(wù)
gulp.task('default', ['minify', 'watch','server', 'jshint'], function() {
console.log('壓縮合并混淆重命名');
return gulp.src('main.min.js')
.pipe(obfuscate()); //壓縮完代碼混淆
});
