查看你的web文件包
|- view
|-|- index.html
|-node_modules[1]
|- gulpfile.js
安裝對(duì)應(yīng)的gulp插件
這個(gè)時(shí)候請(qǐng)確認(rèn)你已經(jīng)把gulp安裝完成了蛙酪。
進(jìn)入控制臺(tái)个初，進(jìn)入對(duì)應(yīng)的項(xiàng)目地址
安裝gulp-connect插件
npm install gulp-connect //這個(gè)插件是gulp模擬靜態(tài)服務(wù)器的插件
編寫gulpfile.js文件
重點(diǎn)來了悦污，想讓你的工作更輕松更自動(dòng)，就要好好寫gulpfile.js了
- 首先先把需要用到的方法放到簡(jiǎn)單的（你喜歡的）名字變量里
var gulp = require('gulp');
var connect = require('gulp-connect'); //靜態(tài)服務(wù)器
- 我們來啟動(dòng)一個(gè)靜態(tài)服務(wù)器
//使用connect啟動(dòng)一個(gè)web服務(wù)器
gulp.task('woyaofuwuqi', function () { //任務(wù)名稱不要有空格
connect.server({
liverload: true,port:9000 //端口號(hào)
});
});
- 編寫默認(rèn)任務(wù)
//默認(rèn)任務(wù)
gulp.task('default', function() {
// 測(cè)試一下
console.log('this is a new test page.');
gulp.start('woyaofuwuqi'); //啟動(dòng)一個(gè)web服務(wù)器
});
gulp每次啟動(dòng)的時(shí)候（在控制臺(tái)寫gulp）都會(huì)運(yùn)行默認(rèn)任務(wù)
- 完成半自動(dòng)化
4.1 制作一個(gè)清除緩存的方法
gulp.task('qinghuancun', function () {
//清除緩存埠褪，或者說，重新加載所有html文件
gulp.src('*.html')
.pipe(connect.reload());
});
4.2 監(jiān)聽html文件
gulp.task('watchHtml',function () {
//監(jiān)聽所有html文件挤庇，如果有變化钞速，則執(zhí)行清除緩存方法
gulp.watch(['*/*.html'],['qinghuancun']);
});
4.3 把監(jiān)聽任務(wù)追加到啟動(dòng)服務(wù)器任務(wù)中
//第一種方法：將監(jiān)聽任務(wù)寫進(jìn)'woyaofuwuqi'任務(wù)中
//不推薦
gulp.task('woyaofuwuqi', function () {
//任務(wù)名稱不要有空格
connect.server({
liverload: true,port:9000 //端口號(hào)
});
gulp.watch(['*/*.html'],['qinghuancun']);
});
/***********************************************************/
//第二種方法：新建一個(gè)任務(wù)列表，把監(jiān)聽任務(wù)與服務(wù)器任務(wù)都放在列表中
//推薦
gulp.task('taskList', ['woyaofuwuqi','watchHtml']);
//修改默認(rèn)任務(wù)
gulp.task('default', function() {
// 測(cè)試一下
console.log('this is a new test page.');
//gulp.start('woyaofuwuqi');
gulp.start('taskList'); //執(zhí)行任務(wù)列表
});
- 查看你的成果
在命令行中進(jìn)入你的項(xiàng)目文件夾嫡秕，輸入gulp渴语，進(jìn)入http://localhost:9000[2]查看你的index.html頁(yè)面內(nèi)容，即時(shí)修改index.html文件內(nèi)容昆咽，頁(yè)面將會(huì)自動(dòng)刷新驾凶。
