Glup V4.0.0 'gulp start' is not a function - angularjs

Question

I have this below gulpfile.js. When i run the app using 'gulp start' then it is showing start is not a function.
Glup-cli version i'm using V4.0.0
const gulp = require('gulp');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const scripts = require('./scripts');
const styles = require('./styles');
// Some pointless comments for our project.
var devMode = false;
gulp.task('css', function() {
gulp.src(styles)
.pipe(concat('main.css'))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('js', function() {
gulp.src(scripts)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./dist/js'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('html', function() {
return gulp.src('./src/templates/**/*.html')
.pipe(gulp.dest('./dist/'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('build', function() {
gulp.start(['css', 'js', 'html'])
});
gulp.task('browser-sync', function() {
browserSync.init(null, {
open: false,
server: {
baseDir: 'dist',
}
});
});
gulp.task('start', function() {
devMode = true;
gulp.start(['build', 'browser-sync']);
gulp.watch(['./src/css/**/*.css'], ['css']);
gulp.watch(['./src/js/**/*.js'], ['js']);
gulp.watch(['./src/templates/**/*.html'], ['html']);
});

Answer 1

gulp.start has been deprecated in v4. Depending on your needs, you can use gulp.series or gulp.parallel instead.
- gulp.task('start', function() {
- devMode = true;
- gulp.start(['build', 'browser-sync']);
+ gulp.task('start', gulp.series('build', 'browser-sync'), function(done) {
+ devMode = true;
gulp.watch(['./src/css/**/*.css'], ['css']);
gulp.watch(['./src/js/**/*.js'], ['js']);
gulp.watch(['./src/templates/**/*.html'], ['html']);
});
This question is probably a duplicated of this one, but since that question hasn't got an accepted answer I'll just echo Mark's answer.

Answer 2

As Derek said, in v4 of gulp you have to use gulp.series or gulp.parallel;
Another differences for v4 is that you need to explicit when the task is done, you have 6 ways to do it.. I'll link this answer for a really good explanation Gulp error: The following tasks did not complete: Did you forget to signal async completion?
Mohamed explanation might be useful to understand in depth the reasons, you can find both: Migrate gulp.start function to Gulp v4
I have tried the solution but it needed more code, so I will write my main changes here:
gulp.task("build",
gulp.series(gulp.parallel("css", "js", "html"), function (done) {
done();
})
);
gulp.task("start", gulp.series("build", "browser-sync"), function (done) {
devMode = true;
gulp.watch(["./src/css/**/*.css'"], ["css"]);
gulp.watch(["./src/js/**/*.js"], ["js"]);
gulp.watch(["./src/templates/**/*.html"], ["html"]);
done();
});
in all of the other task, I simply added the done() function ( with the exception of the task html because it has a return that already explicit when the task is done)
Hope this will help someone else, have a nice day :)