Почему я не могу заставить BrowserSync работать с Gulp версии 4?

Question

Я не могу понять, почему я не запускаю BrowserSync. Кажется, что Sass не работает для меня на 4-й версии Gulp, но я не могу запустить BrowserSync с Gulp версии 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

У меня была такая же проблема.

Я не уверен, что эти посты все еще подходят для последнего глотка.Вот мой 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;

Вы можете проверить этот код, загрузив этот репо, который я создал.

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

Answer 2

Также внесите эти изменения:

 // 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');