gulp-watch 在监视 html 个文件时运行所有任务

Question

有一个任务'serve'，手表功能如下图：

gulp.task('serve', function() {
  gulp.watch(['source/scripts/*.js'], ['concatjs', reload]);
  gulp.watch(['source/styles/*.css'], ['concatcss', reload]);
  gulp.watch(['app/static/*.html'], [reload]);
});

当我更新js或css文件时gulp只执行concatjs或concatcss 任务对应。但是如果更新 html 文件 gulp 执行所有任务，甚至是未注册到 watch 函数的任务，它会抛出错误：

[18:26:31] Starting 'lesstocss'...                                                                                                          
[18:26:31] Starting 'concatjs'...                                                                                                           
[18:26:31] Starting 'concatcss'...                                                                                                          
[18:26:31] Starting 'serve'...                                                                                                              
[error] You tried to start Browsersync twice! To create multiple instances, use browserSync.create().init()                                 
[18:26:31] Finished 'serve' after 6.1 ms                                                                                                    
[18:26:31] Finished 'lesstocss' after 38 ms                                                                                                 
[18:26:31] Finished 'concatjs' after 47 ms                                                                                                  
[18:26:31] Finished 'concatcss' after 41 ms

也许 gulp 以另一种方式处理 html 文件？我使用的所有代码：

var gulp            = require('gulp');
var concat          = require('gulp-concat');
var browserSync     = require('browser-sync');
var reload          = browserSync.reload;
var less            = require('gulp-less');
var sourcemaps      = require('gulp-sourcemaps');


gulp.task('lesstocss', function () {
  return gulp.src('source/styles/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('source/styles/'));
});

gulp.task('concatjs', function() {
  return gulp.src(['source/scripts/mls.js', 'source/scripts/main.js'])
    .pipe(concat('result.js'))
    .pipe(gulp.dest('app/static/scripts/'));
});

gulp.task('concatcss', function() {
  return gulp.src(['source/styles/mls.css', 'source/styles/main.css'])
    .pipe(concat('result.css'))
    .pipe(gulp.dest('app/static/styles/'));
})

gulp.task('serve', function() {
  browserSync.init({
    proxy: "localhost:3000",
    browser: "google chrome",
    notify: false,
    open: 'local'
  });

  gulp.watch(['source/scripts/*.js'], ['concatjs', reload]);
  gulp.watch(['source/styles/*.css'], ['concatcss', reload]);
  gulp.watch(['app/static/*.html'], [reload]);
});

Answer 1

我不确定以下行是否有效语法：

gulp.watch(['app/static/*.html'], [reload]);

gulp.watch(glob[ opts], tasks) ：当以这种方式使用时 - 正如您所做的那样 - tasks 是一个字符串数组，它们本身由 gulp.task() 创建。查看文档

Names of task(s) to run when a file changes, added with gulp.task()

来自 https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb

我们绝对需要查看重新加载和您的其余部分 gulpfile.js

这是与 browserSync 重新加载一起使用的示例代码：

 gulp.watch("./scss/*.scss", ["scss-watch"]);
 gulp.watch("./*.html").on("change", browserSync.reload);
      // gulp.watch("./css/*.css").on("change", browserSync.reload);
 gulp.watch("./js/*.js").on("change", browserSync.reload);

Answer 2

var gulp = require("gulp");
var changedInPlace = require("gulp-changed-in-place");
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var autoprefixer = require("gulp-autoprefixer");
var cleanCSS = require("gulp-clean-css");
// var sourcemaps = require("gulp-sourcemaps");
// var runSequence = require("run-sequence");


// Static Server + watching scss/html files
gulp.task("browsersync", ["sass"], function() {

  browserSync.init({
    server: {
      baseDir: "./",
      index: "home.html"
    },
    ghostMode: false
  });


  gulp.watch("./scss/*.scss", ["sass"]);
  gulp.watch("./*.html").on("change", browserSync.reload);
  gulp.watch("./js/*.js").on("change", browserSync.reload);
});

  // Compile sass into CSS & auto-inject into browsers
gulp.task("sass", function() {
    return gulp.src("./scss/*.scss")
    .pipe(changedInPlace())
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css"))
    .pipe(browserSync.stream());
});

在这一点上，我认为展示我的作品会很有启发性 gulpfile.js。它使用 sass 但你可以交换它。请注意，它使用首选

var browserSync = require("browser-sync").create();

并避免在 watch 语句中使用不寻常且可能有问题的数组。但是，如果您确实定义了 2 'serve' 个任务，那可能是您的问题（请参阅下面的评论）

gulp-watch 在监视 html 个文件时运行所有任务

gulp-watch runs all tasks if it watches html files

node.js

gulp

gulp-watch