【问题标题】：Why is browser-sync with gulp not working为什么浏览器同步与 gulp 不起作用
【发布时间】：2019-12-13 10:02:09
【问题描述】：

在关注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 会在加载对浏览器的更改之前运行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)

【问题讨论】：

那些 browsersync 文档使用 gulp v.3+，而您可能使用的是 gulp4+。 browsersync 的人做得不好。通过搜索您的错误Task function must be specified 来查看stackoverflow.com/questions/56554991/… 和其他人。
这很有帮助@Mark。必须使用gulp docs 来获得gulp v4+ 的完整指南。

标签： javascript gulp browser-sync gulp-watch

【解决方案1】：

我的演示（gulp 4.0.2）https://github.com/kaluogh/bootstrap-gulp 只是有 sass 手表

【讨论】：

【解决方案2】：

案件已解决。关注gulp docs了解更多。

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

// Process `scss` files to `css` and autoprefix them
function style() {
   return gulp.src(./src/assets/sass/**/*.scss)
      .pipe(sass()
         .on('error', (err) => {
            console.log(`Error: ${err.message} on line: ${err.lineNumber} in: ${err.fileName}`)
         }))
      .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());
}
exports.style = style;

// Concat `js` files to `main.js` file
function concatjs() {
   return gulp.src(./src/assets/js/**/*.js)
      .pipe(concat('main.js'))
      .pipe(gulp.dest(['./src/assets/js/**/*.js', '!./src/assets/js/main.js'])) //Prevents infinite loop by excluding the processed `main.js` file
      .pipe(browserSync.stream());
}
exports.concatjs = concatjs;

// Watch all the files for changes and stream/reload for changes
function watch() {
   browserSync.init({
      server: {
         baseDir: './src/'
      }
   });
   gulp.watch('./src/assets/sass/**/*.scss', style);
   gulp.watch(['./src/assets/js/**/*.js','!./src/assets/js/main.js'], concatjs);
   gulp.watch('./src/**/*.html').on('change', browserSync.reload);
   gulp.watch('./src/**/*.php').on('change', browserSync.reload);
}
exports.watch = watch;

谢谢和欢迎 :)

【讨论】：