为什么与 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 and ，但其中 none 解决了我的问题。

我原以为 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)

Answer 1

我的演示(gulp 4.0.2) https://github.com/kaluogh/bootstrap-gulp 刚刚 sass 观看

Answer 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;

谢谢并且欢迎:)

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

Why is browser-sync with gulp not working

javascript

gulp

browser-sync

gulp-watch

在遵循 browsersync 文档之后，这就是我想出的：

案件破案。关注 gulp docs 了解更多。