（三） 一個可以實時監察檔案 gulp task
在 gulp 之中，提供了一個 watch() 的 API，watch() 這個 function 會監察符合範圍的檔案，範圍之中的檔案一但更改，就會運行 function 內的內容。透過使用這個 function，我們就可以定下一些實時監察的工作。
打開 gulpfile.js，增加了一個 watch 的 gulp function 讓我們可以監察 src 內的檔案。
const gulp = require("gulp");
const babel = require("gulp-babel");
gulp.task("watch", function () {
gulp.watch(['src/*.js'], function(cb) {
console.log('file changed');
cb();
});
});
gulp.task("default", function () {
gulp.src("src/index.html")
.pipe(gulp.dest("dist"));
return gulp.src("src/*.js")
.pipe(babel({
presets: ["@babel/preset-env"]
}))
.pipe(gulp.dest("dist"));
});
這次在 command line 運行 gulp watch，這時 console 應該不會馬上就結束，而是進入了一個等待的狀態。這時我們更改 app.js ， 例如把 bob 更改成 alice，然後儲存。
在運行 gulp 的 console 之中應該有以下的信息
PS C:\Sources\gulp-test> gulp watch
[09:29:17] Using gulpfile C:\Sources\gulp-test\gulpfile.js
[09:29:17] Starting 'watch'...
[09:30:51] Starting '<anonymous>'...
file changed
[09:30:51] Finished '<anonymous>' after 9.71 ms
可以看到 watch 之中的內容在更改檔案後成功執行，以上就是 gulp 之中 watch 的作用。
（四） 一個可以實時監察檔案然後更新的 web server
上面提及到 watch 這個 function 的作用，但是要做到更改檔案內容之後自動更新網頁，我們就需要使用到 web server 去 host 我們的檔案。
browser-sync 提供了一個 web server 的功能和可以進行 reload 的 API，使我們可以透過用這個 package 在 gulp 當中達到目的。
首先安裝 browser-sync
npm install browser-sync --save-dev
安裝完之後，把 gulpfile.js 修改成
const gulp = require("gulp");
const babel = require("gulp-babel");
const browserSync = require('browser-sync').create();
gulp.task("default", function () {
gulp.src("src/index.html")
.pipe(gulp.dest("dist"));
return gulp.src("src/*.js")
.pipe(babel({
presets: ["@babel/preset-env"]
}))
.pipe(gulp.dest("dist"));
});
gulp.task('js-watch', gulp.series('default', function (cb) {
browserSync.reload();
cb();
}));
gulp.task("watch", gulp.series('default', function () {
browserSync.init({
server: {
baseDir: "./dist/"
}
});
gulp.watch(['src/*.js' , 'src/*.html'], gulp.series('js-watch'));
}));
首先是在先頭多了一個引用 browser-sync 的變數
const browserSync = require('browser-sync').create();
然後多了一個叫做 js-watch 的 task，在這先前，在這裡使用了一個 gulp.series() 的 API，gulp.series() 可以把輸入的 task 順序運行，在這裡的意思即是會在運行完 default 這個 task 之後再運行後面的 function。
gulp.task('js-watch', gulp.series('default', function (cb) {
browserSync.reload();
cb();
}));
然後是 gulp 的 watch task，
gulp.task("watch", gulp.series('default', function () {
browserSync.init({
server: {
baseDir: "./dist/"
}
});
gulp.watch(['src/*.js' , 'src/*.html'], gulp.series('js-watch'));
}));
一樣這裡用了 gulp.series() ，在一運行 watch 這個 task 的時候就會運行 default 的內容。
browserSync.init 可以建立一個 web server，而這裡的運行目錄則是在 babel 編譯完成後的 dist folder。
而下面的 gulp.watch() function，一但有任何的 js / html 作出改動，就會運行 js-watch 這個 gulp task，會再編譯一次放到 dist folder，然後會自動 refresh 開著的網頁。
接下來測試一下實際的運作，在 command line 打下 gulp watch 之後應該會出現
PS C:\Sources\gulp-test> gulp watch
[09:09:19] Using gulpfile C:\Sources\gulp-test\gulpfile.js
[09:09:19] Starting 'watch'...
[09:09:19] Starting 'default'...
[09:09:20] Finished 'default' after 487 ms
[09:09:20] Starting '<anonymous>'...
[Browsersync] Access URLs:
---------------------------------------
Local: http://localhost:3000
External: http://___.___.___.___:3000
---------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
---------------------------------------
[Browsersync] Serving files from: ./dist/
這些會有一個網頁彈出來，內容正是之前所建立的 index.html
這時我們去到 src 入面的 app.js，把 alice 改回 bob 之後儲存。運行 gulp watch 的 command line 會有以下的信息
[09:15:24] Starting 'js-watch'...
[09:15:24] Starting 'default'...
[09:15:25] Finished 'default' after 87 ms
[09:15:25] Starting '<anonymous>'...
[09:15:25] Finished '<anonymous>' after 1.14 ms
[09:15:25] Finished 'js-watch' after 93 ms
[Browsersync] Reloading Browsers…
打開剛剛彈出來的網頁，發現不用人手 refresh 就已經更新了網站的內容 (因為程式已經自動 reload 了) 。
----
以上就是 gulp 和 babel 的個人學習筆記，只覆蓋了很少的功能，大約是一個入門的用途，想知這這些 package 還可以做到什麼事情的話可以到官方網站研究：
沒有留言:
張貼留言