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