为什么我不能让 BrowserSync 与 Gulp 版本 4 一起工作？

Question

我不明白为什么我没有将 BrowserSync 设置为运行。 Sass 在 Gulp 的第 4 版上对我来说似乎没问题，但我无法使用 Gulp 第 4 版将 BrowserSync 设置为运行。我对此还是很陌生但我知道我必须添加一个 gulp.series 才能使我的 sass 正常工作，所以我不确定它是否与浏览器同步相同。任何帮助将不胜感激。

这是我的 gulpfile.js

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

// Compile Sass & Inject Into Browser
gulp.task('sass', function() {
return gulp.src(['src/scss/*.scss'])
    .pipe(sass())
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
});


// Watch Sass & Serve
gulp.task('serve', ['sass'], function() {
browserSync.init({
    server: "./src"  
});

gulp.watch(['src/scss/*.scss'], ['sass']);
gulp.watch("src/*.html").on('change', browserSync.reload);
});

// Default Task
gulp.task('default', ['serve']);

这是我不断收到的错误：

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/home/dan/Web- 
Dev/RedPassX/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/home/dan/Web- 
Dev/RedPassX/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/home/dan/Web-Dev/RedPassX/gulpfile.js:31:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js 
(internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)

Answer 1

也进行这些更改：

 // Watch Sass & Serve
gulp.task('serve', gulp.series('sass',  function(done) {

  browserSync.init({
    server: "./src"  
  });

  gulp.watch(['src/scss/*.scss'], gulp.series('sass'));
  gulp.watch("src/*.html").on('change', browserSync.reload);
  done();
});

// Default Task
gulp.task('default', 'serve');

Answer 2

我也遇到了同样的问题。

我不确定那些 post 是否与最新的 gulp 相关。这是我的 gulpconfig.js，您会注意到我使用了不同的方法来完成它。我避免使用 gulp 任务，而是创建一个方法然后将其导出。

然后，我可以运行 'gulp sass' 或 'gulp watch' 取决于我的需要

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

function runSass() {
  return gulp
    .src('styles/*.scss')
    .pipe(sass())
    .pipe(concat('styles.css'))
    .pipe(gulp.dest('./'))
    .pipe(browserSync.stream());
}

function reload() {
  browserSync.reload();
}

function watch() {
  browserSync.init({
    server: {
      baseDir: './'
    }
  });
  gulp.watch('styles/*.scss', runSass);
  gulp.watch('*.html', reload);
  gulp.watch('*.js', reload);
}

exports.sass = runSass;
exports.watch = watch;

您可以通过下载我创建的这个 repo 来测试这个代码。

https://github.com/farhan-syah/gulp-sass-starter

为什么我不能让 BrowserSync 与 Gulp 版本 4 一起工作？

Why can't I get BrowserSync to work with Gulp Version 4?

gulp

gulp-browser-sync