如何使用 gulp-connect livereload 設置 gulp-watch？

Question

此站點上的大多數問題和答案不包含一起使用這兩個庫的易於遵循的一般方法。

因此，由於我們使用gulp-connect npm 包，並且我們想使用gulp-watch npm 包，我們如何設置它以便我們可以：

• 觀察某些文件的變化
• 執行一些操作，比如構建/編譯這些文件
• 構建完成后實時重新加載服務器

Answer 1

首先，您將定義構建任務。 這可以有預先要求的任務，可以是某種類型的任務，這無關緊要。

gulp.task('build', ['your', 'tasks', 'here']);

然后，您需要激活連接服務器。 提供編譯結果（在本例中為dist目錄）並使用livereload: true參數啟用 livereload livereload: true 。

const connect = require('gulp-connect');

gulp.task('server', function() {
  return connect.server({
    root: 'dist',
    livereload: true
  });
});

最后，您將設置手表邏輯。 請注意，我們使用的是watch而不是gulp.watch 。 如果您決定更改它，請注意它們的 API 不同並且它們具有不同的功能。 此示例使用gulp-watch 。

const watch = require('gulp-watch');

gulp.task('watch-and-reload', ['build'], function() {
  watch(['src/**'], function() {
    gulp.start('build');
  }).pipe(connect.reload());
});

gulp.task('watch', ['build', 'watch-and-reload', 'server']);

watch-and-reload任務將取決於build任務，因此它確保至少運行一個構建。

然后，它將監視您的源文件，並在回調中啟動build任務。 每次更改目錄中的文件時都會執行此回調。 您可以將選項對象傳遞給watch方法以更具體。 檢查其存儲庫中的使用 API。

此外，您需要啟動build操作，為此我們使用gulp.start 。 這不是推薦的方法，最終會被棄用，但到目前為止它有效。 StackOverflow 中與這些問題有關的大多數問題都會尋找改變方法的替代解決方法。 （見相關問題。）

注意gulp.start是同步調用的。 這就是您想要的，因為您希望在繼續事件流之前允許build任務完成。

最后，您可以使用事件流重新加載頁面。 事件流將正確捕獲更改的文件並重新加載這些文件。

Answer 2

加快速度，根據當前穩定的 gulp 版本

gulp.task API 不再是推薦的模式。 使用導出對象制作公共任務

來自官方文檔： https : //gulpjs.com/docs/en/api/task#task

要配置 watch 和 livereload，您需要遵循

• 一飲而盡
• 吞咽連接

監視功能在 gulp 模塊本身中可用

使用npm install --save-dev gulp-connect

要為 livereload 配置 gulp-connect 服務器，我們需要將屬性 livereload 設置為true

運行所有任務，然后是調用 watch 函數的任務，其中給出了 globs 和任務。 對匹配 globs 的文件的任何更改都會觸發傳遞給 watch() 的任務。

傳遞給 watch() 的任務應該發出異步完成信號，否則任務將不會第二次運行。 簡單的工作：應該調用回調或返回流或承諾

配置.pipe(connect.reload())后，在您認為需要重新加載 dest 創建的文件的地方附加.pipe(connect.reload())后跟pipe(dest(..))

這是帶有連接 lifereload 的簡單工作 gulpfile.js

const {src, dest, watch, series, parallel } = require("gulp"); 
const htmlmin = require("gulp-htmlmin");
const gulpif = require("gulp-if");
const rename = require('gulp-rename');
const connect = require("gulp-connect");

//environment variable NODE_ENV --> set NODE_ENV=production for prouduction to minify html and perform anything related to prod
mode = process.env.NODE_ENV || 'dev';  
var outDir = (mode != 'dev') ? 'dist/prod': 'dist/';
const htmlSources = ['src/*.html'];

function html() {
  return src(htmlSources)
  .pipe(gulpif(
      mode.toLowerCase() != 'dev', 
      htmlmin({
        removeComments: true, 
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
      })
    )
  )
  .pipe(dest(outDir))
  .pipe(connect.reload()); 
}

function js(){
  return src('src/*.js')
  .pipe(uglify())
  .pipe(rename({ extname: '.min.js' }))
  .pipe(dest(outDir))
  .pipe(connect.reload());
}

function server() {
  return connect.server({
    port: 8000,
    root: outDir,
    livereload: true
  })
}

function watchReload() {
  let tasks = series(html, js);
  watch(["src/**"], tasks);
}

exports.html = html; 
exports.js = js;
exports.dev = parallel(html, js, server, watchReload);

使用 livereload 屬性配置連接服務器

function server() {
      return connect.server({
        port: 8000,
        root: outDir,
        livereload: true  //essential for live reload 
      })
    }

注意上面代碼中的.pipe(connect.reload()) 。 必須將所需文件的流通過管道傳輸到 connect.reload() 否則如果您任意調用 connect.reload() 它可能無法工作

function html() {
  return src(htmlSources)
  .pipe(gulpif(
      mode.toLowerCase() != 'dev', 
      htmlmin({
        removeComments: true, 
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
      })
    )
  )
  .pipe(dest(outDir))
  .pipe(connect.reload());  //Keep it if you want livereload else discard 
}

由於我們配置了公共任務 dev 以下命令將執行所有任務，然后是 connect 和 watchReload

gulp dev