Gulp.js 是一個(gè)自動(dòng)化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動(dòng)執(zhí)行常見任務(wù)锦援。Gulp.js 是基于 Node.js 構(gòu)建的,利用 Node.js 流的威力,你可以快速構(gòu)建項(xiàng)目.
為什么要用Node環(huán)境：
js是一個(gè)腳本文件昂拂，不能直接用來操作文件。但是嘹黔，在項(xiàng)目過程中舶斧，免不了需要經(jīng)常操作一些文件，包括移動(dòng)復(fù)制壓縮上傳修改等。如果重新學(xué)習(xí)C之類底層操作的語言的未免成本太高调窍，此時(shí)node的橫空出世，解決了這個(gè)問題张遭。因?yàn)閚ode使用了js的語法邓萨，而且使用js的人也越來越多，node就理所當(dāng)然的火遍大江南北
在node中有很多插件菊卷，類似于手機(jī)中的軟件缔恳，拿到一個(gè)新手機(jī)沒有任何軟件是沒有辦法使用的。
gulp就是node中的工具之一洁闰。類似前端工程化工具還有：webpack歉甚，grunt，browserify扑眉。
gulp是一種前端自動(dòng)化工具纸泄，在使用gulp之前需要先安裝gulp
安裝gulp有兩種方式，一種是通過下載軟件安裝腰素，一種是通過類似手機(jī)的應(yīng)用商店的軟件下載聘裁，而node就是這個(gè)應(yīng)用商店
直接在網(wǎng)頁上下載安裝不僅安全性無法保證，而且還會(huì)造成不兼容等問題弓千；
通過手機(jī)的應(yīng)用商店下載的軟件會(huì)自動(dòng)適配當(dāng)前手機(jī)的型號(hào)和cpu等信息衡便，既保證了安全，也保證的軟件的功能完整性
配置nodejs
在配置gulp環(huán)境之前需要有node環(huán)境,去官網(wǎng)下載node
node是一個(gè)命令行工具洋访，使用這個(gè)工具需要用到兩個(gè)命令
npm install 安裝軟件
npm uninstall 卸載軟件
1.需要注意的是node沒有可視化界面操作镣陕，直接在命令行中進(jìn)行操作
node -v 顯示node的版本
2.gulp的全局環(huán)境類似于下載器，在使用gulp之前需要先安裝環(huán)境
npm install gulp -g
下載完成之后執(zhí)行
gulp -v
查看gulp的版本姻政，安裝完成
3.創(chuàng)建一個(gè)文件夾呆抑，起個(gè)任意名字，從命令行中進(jìn)入當(dāng)前文件夾
執(zhí)行npm install gulp --save-dev
配置局部環(huán)境 下載完成后執(zhí)行g(shù)ulp -v會(huì)出現(xiàn)全局和局部的版本號(hào)
執(zhí)行npm init 設(shè)置配置信息扶歪，可以全部為默認(rèn)常用插件配置文件
開始使用gulp
實(shí)現(xiàn)功能將線下版本的文件放在線上版本中
在命令行中輸入gulp理肺，提示沒有g(shù)ulpfile文件，需要手動(dòng)創(chuàng)建固定文件名gulpfile.js文件
在該文件中引入gulp模塊善镰，
let gulp = require("gulp");
gulp為gulp模塊返回的對(duì)象妹萨，在這個(gè)對(duì)象中，有一些方法
gulp.task("指令名字",()=>{指令執(zhí)行函數(shù)}) 綁定指令的方法
gulp.task("index",()=>{
gulp.src()//找到源文件的目錄
gulp.pipe()//在連綴之中繼續(xù)調(diào)用gulp方法
gulp.dest()//轉(zhuǎn)存方法
//實(shí)現(xiàn)功能的時(shí)候炫欺，一定要用ruturn
return gulp.src("index.html").pipe(gulp.dest("dist"));
})
在gulp.src中可以接收數(shù)組乎完，表示多個(gè)文件
文件名可以用*代替，表示通配
*/表示多層文件夾嵌套
!文件路徑品洛，表示除了此文件
gulp.watch()監(jiān)控
gulp.task("watch",()=>{
//監(jiān)控index.html文件树姨，如果發(fā)生改變摩桶，那么執(zhí)行index指令
gulp.watch("index.html",["index"]);
})
gulp原生默認(rèn)指令（default）：
- default 為gulp自帶默認(rèn)指令，當(dāng)在命令行中執(zhí)行g(shù)ulp后不跟任何指令名的時(shí)候帽揪，所執(zhí)行的指令
- gulp.task("default",["hello"]); //第二個(gè)參數(shù)為要執(zhí)行的命令名硝清，可以接受多個(gè)，表示默認(rèn)執(zhí)行的指令
gulp插件（服務(wù)器插件）創(chuàng)建本地服務(wù)
安裝插件（插件只有局部转晰，沒有全局芦拿，所以要安裝在項(xiàng)目文件夾中）
npm install gulp-connect
引入插件
在gulpfile文件中引用：
let connect = require("gulp-connect");
配置gulp-connect
gulp.task("server",()=>{
connect.server({
root:"dist", //以哪個(gè)文件夾為服務(wù)器
port:8888, //端口號(hào)
livereload:true //是否可以自動(dòng)刷新
})
})
此時(shí)可以在瀏覽器中輸入本地地址，訪問服務(wù)器
如果要實(shí)現(xiàn)保存自動(dòng)刷新功能查邢，首先需要在index指令中調(diào)用connect插件
gulp.src("index.html").pipe(gulp.dest("dist")).pipe(connect.reload());
其次需要同時(shí)運(yùn)行服務(wù)器指令和監(jiān)測(cè)指令蔗崎，可通過默認(rèn)指令實(shí)現(xiàn)
gulp.task("default",["server","watch"]);
表示先打開server，再打開watch扰藕，就可以進(jìn)行實(shí)時(shí)監(jiān)測(cè)缓苛，實(shí)現(xiàn)本地修改保存，服務(wù)器自動(dòng)修改
服務(wù)器代理（解決跨域問題）
安裝http-proxy-middleware插件(gulp代理中間件插件)
npm install http-proxy-middleware
引入插件
let proxy = require('http-proxy-middleware’);
//開啟服務(wù)
gulp.task('proxyServer', function() {
connect.server({
root: 'src',
port: 8888,
middleware: function(connect, opt) {
return [
proxy('/api', {
target: 'https://api.douban.com/v2', //代理的目標(biāo)地址
changeOrigin:true
pathRewrite:{ //路徑重寫規(guī)則
'^/api':''
}
})
]
}
});
});
說明：proxy()參數(shù)解釋
- '/api' => 匹配你要代理的請(qǐng)求地址前綴
- target => 你要把請(qǐng)求代理到哪
- pathRewrite => 是把在頁面中寫的請(qǐng)求地址的某部分的重寫為后面的字符串
此時(shí)頁面中請(qǐng)求的寫法：
$.post('/api/book/1226666',function(data){
console.log(data);
})
// 也就是發(fā)往 /api/book/1226666的請(qǐng)求最終會(huì)被發(fā)往 https://api.douban.com/v2/book/1226666
文件拷貝
我們可以通過剛剛學(xué)習(xí)的拷貝命令去拷貝其他項(xiàng)目中的文件邓深，包括項(xiàng)目中的圖片
gulp.task("images",()=>{
return gulp.src("images/*.jpg").pipe(gulp.dest("dist/images")) //*代表所有
})
拷貝多種文件及文件夾：
- 拷貝多種后綴名
gulp.src("images/*.{jpg,png}")
- 如果要拷貝文件夾下所有內(nèi)容
gulp.src("images//")
如果要拷貝所有的話未桥， 可以使用 images/*/ 去表示當(dāng)前images文件夾下所有的內(nèi)容全部進(jìn)行拷貝。
將兩個(gè)文件夾拷貝到同一個(gè)目標(biāo)文件夾下
gulp.src(['xml/.xml','json/.json']).pipe(gulp.dest('dist/data’))
- 排除 !
gulp.src(['xml/.xml','json/.json','!json/secret.json']).pipe(gulp.dest('dist/data'))
- 任務(wù)合并執(zhí)行
gulp.task('build',['index-copy','image-copy','data'],()=>{
console.log('編譯成功')
})
偵測(cè)文件變化庐完，自動(dòng)執(zhí)行任務(wù)
gulp.watch()
gulp.task('watch',()=>{
gulp.watch('index.html',['index-copy']);
gulp.watch('images/**/*',['images-copy']);
gulp.watch(['json/*.json','xml/*.xml','!json/secret.json'],['data']);
})
偵測(cè)自動(dòng)執(zhí)行钢属，如果文件發(fā)生改變那么將執(zhí)行對(duì)應(yīng)任務(wù)。
ES6轉(zhuǎn)ES5 gulp-babel
用于將es6轉(zhuǎn)成es5需要先安裝babel插件
npm install gulp-babel@7
再安裝babel上的將es6轉(zhuǎn)成es5的插件
npm install babel-preset-es2015
根據(jù)babel指引不需要這個(gè)门躯，但是實(shí)際少了會(huì)報(bào)錯(cuò)
npm install babel-core
在當(dāng)前gulp目錄中淆党，創(chuàng)建.babelrc的文件，里面的內(nèi)容是{"presets":["es2015"]}
gulp.task('toes5',()=>{
return gulp.src(['js/*.js'])
.pipe(babel())
.pipe(gulp.dest('dist/js'))
})
gulp合并插件 gulp-concat用于合并js文件
gulp.task('scripts',()=>{
return gulp.src(['js/nav.js','js/banner.js’])
.pipe(babel())
.pipe(concat('index.js'))
.pipe(gulp.dest('dist/js'))
})
gulp代碼壓縮插件gulp-uglify
gulp.task('scripts',()=>{
return gulp.src(['js/nav.js','js/banner.js’])
.pipe(babel())
.pipe(concat('index.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
我們是否可以保存兩份js文件讶凉，一份已經(jīng)壓縮染乌，另一份沒有壓縮的那？
重命名 gulp-rename插件
gulp.task('scripts',()=>{
return gulp.src(['js/nav.js','js/banner.js’])
.pipe(babel())
.pipe(concat('index.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(rename('index.min.js'))
.pipe(gulp.dest('dist/js'))
})
css壓縮 gulp-minify-css
此處需要配合sass插件懂讯，將sass文件先編譯成css文件后荷憋，在進(jìn)行壓縮
gulp.task('sass',()=>{
return gulp.src('stylesheet/**/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('dist/css'))
})
圖片壓縮gulp-imagemin插件
gulp.task('image-copy',()=>{
return gulp.src('images/**/*’)
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
})
gulp插件
插件官網(wǎng)http://gulpjs.com/plugins/
將插件安裝到本地之后， 要require引入之后才可以正常使用
