gulpgulp-browser-sync

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


I can't figure out why I am not getting BrowserSync to run. Sass seems to work no problem for me on version 4 of Gulp, but I cannot get BrowserSync to run with Gulp Version 4. I'm still pretty new at this but I know I had to add a gulp.series to make my sass work so I'm not sure if it's the same deal with Browser Sync. Any help would be appreciated.

Here is my 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']);

Here is the error I keep on getting:

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)

Solution

  • Make these changes as well:

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