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

Question

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)

Yes, your 'serve, watch statements and 'default' task all need to be modified to work with gulp4. Like gulp.task('serve', gulp.series('sass', function..... There are some good migrating to gulp4 blog posts out there. — Mark, Jan 25 '19 at 06:13
To get SASS working I added "gulp.watch('src/sass/**/*.sass', gulp.series('sass'));" I've been looking at a bunch of Blogs but none of them are correct when it comes to setting the Browser Sync to work with Gulp Version 4 which is why I am on here. Like I said I'm still pretty new to this. — , Jan 25 '19 at 06:18

score 3 · Accepted Answer · edited Feb 16 '19 at 00:24

3

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

edited Feb 16 '19 at 00:24

Zanderi

907
9
15

answered Jan 25 '19 at 06:26

Mark

143,421
24
428
436

You're going to have to give me a full example of what I am trying to accomplish because I've been doing these little changes here and there for hours and I still get the same error. I even tried adding the gulp.series on the default task like such: "gulp.task('default', gulp.series('serve'); – Jan 25 '19 at 06:43

score 1 · Answer 2 · answered Jan 25 '19 at 15:38

I have been having the same problem.

I am not sure if those post are stil relevent for the latest gulp. Here is my gulpconfig.js, you'll notice I used a different approach to get it done. I avoid using gulp task, and instead create a method and then export it.

Then, i can just run 'gulp sass' or 'gulp watch' depending on my need

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;

You can test this code by downloading this repo I created.

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

Gulp4 can still use the gulp.task syntax from gulp3 with the modifications I pointed out in my answer - so yes it is still relevant. That is working code in gulp4. You can go further and make the changes you suggested but they are not necessary in gulp4. However, I fixed the code that was causing the OP's specific error. It is important to know which code was creating the error not just present new different code that does not have an error. Other people will see that same error and learn something about the cause. — Mark, Jan 25 '19 at 15:54
Actually, the code you gave me didn't fix my problem but made me write my code a bit cleaner. For some odd reason I the only thing that made Browser Sync work for me was this line: gulp.task('default', gulp.series('serve');------------- gulp.series is what I was missing. — , Jan 25 '19 at 16:48

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

2 Answers2