我們繼續(xù)在跟目錄下創(chuàng)建src / html烙常，dist /html文件夾视粮，,在src/ html下面創(chuàng)建index.html文件安吁，現(xiàn)在的結(jié)構(gòu)應(yīng)該是這樣的：
myweb
|----- dist
|-----html
|----- node_modules
|-----src
|-----html
|-----index.html
現(xiàn)在在index.html文件中寫入<h1>hello world</h1>贺归。
實現(xiàn)自動拷貝
接下來編寫gulpfile.js文件脖咐，這是實現(xiàn)自動化的關(guān)鍵,目的是把src/ html下面的index.html文件拷貝到dist / html。
//引入gulp模塊
var gulp = require('gulp');
//創(chuàng)建任務(wù)默终，任務(wù)名為copy
gulp.task('copy',function(){
//讀取文件
gulp.src('src/html/index.html')
//寫入文件
.pipe(gulp.dest('dist/html'));
});
編寫完成后椅棺，在控制臺用gulp copy執(zhí)行copy任務(wù)
然后查看dist --> html下面已經(jīng)存在index.html文件。
創(chuàng)建http服務(wù)
下一個任務(wù)是創(chuàng)建一個http服務(wù)齐蔽，通過http服務(wù)訪問dist / html下面的idnex.html两疚。這就需要引入browsersync插件。先用npm安裝含滴，
npm install browser-sync --save-dev
安裝完成后在gulpfile.js中增加以下代碼塊：
//引入browser-sync模塊并創(chuàng)建一個bs對象
var bs = require('browser-sync').create();
//創(chuàng)建server服務(wù),名為start
gulp.task('start',function(){
bs.init({
server:'./dist/html/'
});
});
完成后在控制臺調(diào)用此任務(wù)
打開瀏覽器訪問localhost:3000（也可能瀏覽器會自動打開）诱渤，出現(xiàn)Hello World，按ctrl+c關(guān)閉服務(wù)谈况，任務(wù)完成勺美。
多窗口同步
接下來是一個有趣的事，如果上面編寫的index.html足夠長碑韵，在同時打開多個瀏覽器窗口瀏覽的情況下赡茸，所有窗口竟然會同步滾動！如果此時有手機和這臺電腦處于同一個局域網(wǎng)絡(luò)的話祝闻，手機訪問控制臺中External提供的URL打開的窗口會和PC上的保持同步占卧！如下圖所示效果
實現(xiàn)監(jiān)聽
現(xiàn)在的任務(wù)是實現(xiàn)只要src中的源文件index.html有所改動，程序會自動拷貝到dist-->html下面（即執(zhí)行上面編寫的copy任務(wù)），并且瀏覽器自動刷新屉栓，實現(xiàn)實時瀏覽”這里用到了監(jiān)聽事件舷蒲，繼續(xù)編寫start任務(wù)：
//引入browser-sync模塊并創(chuàng)建一個bs對象
var bs = require('browser-sync').create();
//創(chuàng)建server服務(wù),名為start
gulp.task('start',function(){
bs.init({
server:'./dist/html/'
});
gulp.watch('src/html/index.html',['copy']);
gulp.watch(['src/html/index.html']).on('change',bs.reload);
});
編寫完成后在控制臺執(zhí)行start任務(wù)，開啟http服務(wù)友多。打開多個窗口，發(fā)現(xiàn)能實現(xiàn)同步滾動堤框，現(xiàn)在不要關(guān)閉瀏覽器窗口域滥，打開src/html/index.html，修改頁面內(nèi)容蜈抓，發(fā)現(xiàn)多個瀏覽器窗口實時刷新启绰，展示修改后的結(jié)果。
到此沟使，初步的自動化已經(jīng)實現(xiàn)了委可，此處實時刷新的效率與電腦配置有關(guān)。
