Object not defined in gulp - npm

Question

var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var cp = require('child_process');
var pug = require('gulp-pug');
var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn( jekyll , gulp.task('build'), {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', gulp.task('jekyll-build'), function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', gulp.series('sass', 'jekyll-build'), function() {
browserSync({
server: {
baseDir: '_site'
},
notify: false
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('raw-assets/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
. pipe(gulp.dest('assets/css'))
});
/**
* Compile files from _pugfiles into _includes (for live injecting) and site
(for future jekyll builds)
*/
gulp.task('pug', function buildHTML() {
return gulp.src('_pugfiles/*.pug')
.pipe(pug({
// Your options in here.
pretty: true
}))
.pipe(gulp.dest('_includes'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files/pug files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/css/**', gulp.task('sass'));
gulp.watch(['*.html', '_layouts/*.html', '_includes/*'], gulp.task('jekyll-rebuild'));
gulp.watch(['_pugfiles/*.pug'], gulp.task('pug'));
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', gulp.series('browser-sync', 'watch'));
I changed the
gulp.task('', [])
to
gulp.task('', gulp.series())
But it still gives an error of sass undefined.
I upgraded my gulp to the latest gulp and the gulpfile is not working anymore. I want to be able to run the gulp command and run everything the way it was before gulp 4. Any ways to fix this aside from reverting to the old version of gulp.

Answer 1

Move your 'sass' task before the 'browser-sync' task where it is first called.
I can't find the reference right now but I think when you use the gulp.task registration syntax (instead of functions as is actually recommended in gulp4 now) that you cannot refer to a task that is registered later in the file.
Also you have some other errors in your code. This line (and others like it):
gulp.task('browser-sync', gulp.series('sass', 'jekyll-build'), function() {
should be:
gulp.task('browser-sync', gulp.series('sass', 'jekyll-build', function() {
And:
gulp.task('jekyll-rebuild', gulp.task('jekyll-build'), function () {
browserSync.reload();
});
should be:
gulp.task('jekyll-rebuild', gulp.series('jekyll-build', function () {
browserSync.reload();
}));
Here is a very good migrating to gulp4 article.