gulp-watch runs all tasks if it watches html files - node.js

Question

There is a task 'serve' with watch functions as shown below:
gulp.task('serve', function() {
gulp.watch(['source/scripts/*.js'], ['concatjs', reload]);
gulp.watch(['source/styles/*.css'], ['concatcss', reload]);
gulp.watch(['app/static/*.html'], [reload]);
});
When I update js or css files gulp executes only concatjs or concatcss tasks correspondingly. But if to update the html file gulp executes all tasks even the tasks that wasn't registered to the watch function and it throws an error:
[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
Maybe gulp works with the html files in another way? All code I use:
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());
});
At this point I thought it would be instructive to show my working gulpfile.js. It uses sass but you can swap that. Note it uses the preferred
var browserSync = require("browser-sync").create();
and avoids the unusual and possibly problematic arrays you have in your watch statements. But if you really have 2 'serve' tasks defined that is probably your problem (see my comment below)

Answer 2

I am not sure the following line is valid syntax:
gulp.watch(['app/static/*.html'], [reload]);
gulp.watch(glob[, opts], tasks) : when used this way - as you are doing - tasks is an array of STRINGS which themselves are created by gulp.task(). See the docs
Names of task(s) to run when a file changes, added with gulp.task()
from https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb
We definitely need to see reload and the rest of your gulpfile.js
Here is sample code which works with browserSync reload for example:
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);