gulp-watch запускает все задачи, если просматривает html-файлы

Существует задача «служить» с функциями часов, как показано ниже:

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 выполняет все задачи, даже те, которые не были зарегистрированы в функции наблюдения, и выдает ошибку:

[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]);
});

node.js gulp gulp-watch
person Makha    schedule 15.09.2016    source источник
comment
Я так понимаю, лог это то, что вы видите сразу после сохранения изменения одного из 'app/static/*.html' файлов? Работает ли reload при сохранении изменения 'source/scripts/*.js' или 'source/styles/*.css'? Какой у вас reload и как настроен ваш browserSync.init()?   -  person henry    schedule 15.09.2016
comment
@henry да, у меня есть этот журнал ошибок после изменения 'app/static/*.html'. reload работает со всеми этими файлами (js, css, html). Код был добавлен в сообщение.   -  person Makha    schedule 16.09.2016

Ответы (2)


arrow_upward
1
arrow_downward 

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 задачи «обслуживания», это, вероятно, ваша проблема (см. Мой комментарий ниже)

person Mark    schedule 18.09.2016
comment
Здесь только одна задача serve. Я сделал это коротким в первом посте, а затем добавил полную версию. - person Makha; 18.09.2016
comment
gulp.watch('app/static/*.html').on("change", reload); Я перешел на это. Работает нормально, спасибо. - person Makha; 18.09.2016
comment
@Maxa Если проблема решена, я не возражаю против проверки ответа, если вы считаете, что это уместно. Спасибо. - person Mark; 20.09.2016

arrow_upward
0
arrow_downward

Я не уверен, что следующая строка является допустимым синтаксисом:

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

Нам определенно нужно увидеть reload и остальную часть вашего 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);
person Mark    schedule 15.09.2016
comment
Меня тоже удивил [reload], но на самом деле он работает по самой странной причине: задачи в этом массиве запускаются apply()переводя их на orchestrator.start(), который в качестве последнего аргумента принимает функцию обратного вызова, которая вызывается после завершения выполнения задач. Так что, пока только последний элемент в вашем массиве задач является функцией, он работает. Однако, вероятно, он не предназначался для использования таким образом... - person Sven Schoenung; 15.09.2016
comment
В документации gulp я вижу две формы gulp.watch: gulp.watch(glob[, opts], tasks) и gulp.watch(glob[, opts, cb]), поэтому вы, конечно, можете использовать функцию обратного вызова, но я бы не думайте, что они завернуты в массив, и в их примере это не так завернуто. Но ваше объяснение выглядит хорошо. Но я хотел бы, чтобы OP изменил его и посмотрел, что произойдет, и предоставил полный gulfile.js. - person Mark; 16.09.2016
comment
@Mark Code был добавлен в сообщение. reload — это метод browserSync, который перезагружает браузер после каждого изменения. reload отлично работает здесь. - person Makha; 16.09.2016
comment
У вас есть две определенные задачи «обслуживания»: одна для запуска browserSync и одна для наблюдения. Ваш первый фрагмент кода называется «обслуживание», а в последнем более длинном фрагменте кода у вас есть еще один «обслуживание». ? - person Mark; 18.09.2016