javascript - 为什么浏览器与 gulp 同步不起作用

Question

关注browsersync之后文档这是我想出的:

const gulp = require('gulp'),
   sass = require('gulp-sass'), 
   concat = require('gulp-concat'),
   browserSync = require('browser-sync').create();

gulp.task('watch', ['style', 'concatjs'], (cb) => {
   browserSync.init({
      server: {
         baseDir: "./src/"
      }
   });

   gulp.watch('./assets/scss/**/*.scss', ['style']);
   gulp.watch('./assets/js/**/*.js', ['concatjs']);
   gulp.watch('./**/*.html').on('change', browserSync.reload);
   gulp.watch('./**/*.php').on('change', browserSync.reload);
   cb();
});

// Process scss files to css and autoprefix
gulp.task('style', (cb) => {
   gulp.src('./src/assets/sass/**/*.scss')
      .pipe(sass())
      .pipe(cssprefix('last 2 versions'))
      .on('error', (err) => {
         console.log(`Error: ${err.message} on line: ${err.lineNumber} in: ${err.fileName}`)
      })
      .pipe(gulp.dest('./src/assets/css'))
      .pipe(browserSync.stream());
   cb();
});

// Concat `js` files to the `main.js` file
gulp.task('concatjs', (cb) => {
   gulp.src('./src/assets/js/*.js')
      .pipe(concat('main.js'))
      .on('error', (err) => {
         console.log(`Error: ${err.message} on line: ${err.lineNumber} in: ${err.fileName}`)
      })
      .pipe(gulp.dest('./src/assets/js'))
      .pipe(browserSync.stream());
   cb();
});

经过深入研究，我发现了类似的问题here和 here但他们都没有解决我的问题。

我原以为 watch task 会在 loading 更改之前运行 style task 和 concatjs task浏览器却出现错误:

assert.js:339
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (C:\wamp64\www\Project\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (C:\wamp64\www\Project\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (C:\wamp64\www\Project\gulpfile.js:28:6)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)

Answer 1

我的演示(gulp 4.0.2)https://github.com/kaluogh/bootstrap-gulp只有 sass watch