为什么我不能让BrowserSync与Gulp Version 4一起使用？

Question

我无法弄清楚为什么我没有让BrowserSync运行。在Gulp的第4版中，Sass对我来说似乎没有问题，但是我无法让BrowserSync与Gulp Version 4一起运行。我仍然很新，但我知道我必须添加gulp.series来使我的sass工作所以我不确定它是否与Browser Sync相同。任何帮助，将不胜感激。

这是我的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

我一直有同样的问题。

我不确定这些帖子是否与最新的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