Question

有一项任务＆＃39;服务＆＃39;具有如下所示的手表功能：

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

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();

并避免在监视语句中出现异常且可能有问题的数组。但如果你真的有2＆＃39;服务＆＃39;定义的任务可能是您的问题（请参阅下面的评论）

Answer 2

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

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

gulp.watch（glob [，opts]，tasks）：当你以这种方式使用时 - 正如你所做的那样 - tasks是一个STRINGS数组，它们本身是由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);

如果gulp-watch监视html文件，它会运行所有任务

2 个答案: