在專案引入 gulp 4.0 並開啟 Ｗeb Server (使用 browser-sync)

這篇是使用 gulp 4，所以使用 gulp 3 要注意 task 安排的寫法
正文開始！這一篇要從資料夾中只含有一個 index.html 檔案開始說起

1. 初始化套件管理器 ( NPM )

1

npm init

下指令後會有一些需要輸入的內容，懶人建立就都按 Enter 就好
完成後資料夾中就會有 package.json 檔案了

2. 新增一個 JS 檔案

ex: gulpfile.js
用來加入 gulp 任務

3. require gulp 模組

在終端機下指令

1

npm install gulp

在 gulpfile.js 寫入

1

const gulp = require('gulp');

引入 gulp 後可以使用 gulp.task 來執行任務
例如：

1

gulp.task('default', gulp.series('browserSync'))

在 gulp4 中可使用 gulp.series() 和 gulp.parallel() 來安排任務進行

gulp.series() -> 按照順序進行
gulp.parallel() -> 同時進行
'default' -> 任務名稱
'browserSync' -> 任務的內容

了解任務要如何安排後，接下來要安裝用來開始 web server 的套件 - browser-sync

4. 載入 browser-sync 套件

在終端機下指令安裝 browser-sync

1

npm install browser-sync

在 gulpfile.js 寫入

1

const browserSync = require('browser-sync');

5. 使用 browserSync 所提供的方法來 init

參考寫法：

1
2
3
4
5
6
7

gulp.task('browserSync', function () {
  browserSync.init({
    server: {
      baseDir: './', // 指向要開啟的資料夾
    },
  })
});

6. 執行 gulp 就可以順利開啟 web server 啦

小補充1 - 運用 gulp watch() 讓檔案有更動時自動 reload

gulp watch 是用於監看全局任務，因此可以用於當檔案發生改變時觸發某行為
例如：

1

gulp.watch("*.html").on("change", browserSync.reload);

也就是當 HTML 檔案有更動時，在儲存的同時 web server 也會 reload，這樣在開發上就更方便啦～

小補充2 - 在 gulp4 中任務也可以用函式的方式來寫，並用 export 匯出

1
2
3
4
5
6
7
8
9
10

function browser() {
  browserSync.init({
    server: {
      baseDir: './',
    },
  })
  gulp.watch('*.html').on('change', browserSync.reload);
}

exports.default = gulp.series(browser);

更多 browser-sync 使用方法請見：
https://browsersync.io/docs/gulp#gulp-install