Gulp AssertionError [ERR_ASSERTION]: Task function

Question

I'm trying to customize a template for a demo of a webapp built on AngularJS using MacOS Sierra 10.13.6. I've installed Gulp but when I launch gulp serve return this error without launching the local server:

assert.js:337 throw err; ^

AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/node_modules/undertaker/lib/set-task.js:10:3) at Gulp.task (/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/node_modules/undertaker/lib/task.js:13:8) at Object. (/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/gulpfile.js:9: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:20:18)

Here is the gulpfile.js actually in ~/Desktop/Elysium/repos/elysium-webapp/material/gulpfile.js

I've deleted the previous error regarding /usr/local/share/man/man1/gulp.1 by launching npm uninstall -g gulp and after npm install -g gulp but I still have that issues on assert.js:337

var gulp = require('gulp');
var args = require('yargs').argv;
var browserSync = require('browser-sync');
var config = require('./gulp.config')();
var del = require('del');
var $ = require('gulp-load-plugins')({lazy: true});

gulp.task('help', $.taskListing);
gulp.task('default', ['help']);

gulp.task('vet', function() {
    log('Analyzing source with JSHint and JSCS');

    return gulp
        .src(config.alljs)
        .pipe($.if(args.verbose, $.print()))
        .pipe($.jscs())
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
        .pipe($.jshint.reporter('fail'));
});

gulp.task('clean-tmp', function(done) {
    var files = config.tmp;
    clean(files, done);
});

gulp.task('clean', function(done) {
    var delconfig = [].concat(config.dist, config.tmp);
    log('Cleaning ' + $.util.colors.blue(delconfig));
    del(delconfig, done);
});

gulp.task('clean-all', function(done) {
    var delconfig = config.allToClean;
    log('Cleaning ' + $.util.colors.blue(delconfig));
    clean(delconfig, done);
});

gulp.task('pug-docs', function() {
    log('Compiling docs pug --> html');

    var options = {
        pretty: false
    }

    return gulp
        .src(config.docsPug)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.pug(options))
        .pipe(gulp.dest(config.docs));
});

gulp.task('less', function() {
    log('Compiling Less --> CSS');

    return gulp
        .src(config.less)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.less())
        .pipe($.autoprefixer())
        .pipe(gulp.dest(config.tmp));
});

gulp.task('less-watcher', function() {
    gulp.watch([config.less], ['less']);
});

gulp.task('sass', function() {
    log('Compiling Sass --> CSS');

    var sassOptions = {
        outputStyle: 'nested' // nested, expanded, compact, compressed
    };

    return gulp
        .src(config.sass)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.sourcemaps.init())
        .pipe($.sass(sassOptions))
        .pipe($.autoprefixer())
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest(config.tmp + '/styles'));
});

gulp.task('sass-min', function() {
    log('Compiling Sass --> minified CSS');

    var sassOptions = {
        outputStyle: 'compressed' // nested, expanded, compact, compressed
    };

    return gulp
        .src(config.sass)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.sass(sassOptions))
        .pipe($.autoprefixer())
        .pipe(gulp.dest(config.tmp + '/styles'));    
})

gulp.task('sass-watcher', function() {
    gulp.watch([config.sass], ['sass']);
});

gulp.task('inject', function() {
    log('Injecting custom scripts to index.html');

    return gulp
        .src(config.index)
        .pipe( $.inject(gulp.src(config.js), {relative: true}) )
        .pipe(gulp.dest(config.client));
});

gulp.task('copy', ['sass-min'], function() {
    log('Copying assets');

    var assets = [].concat(config.assetsLazyLoad, config.assetsToCopy);

    gulp.src(config.tmp + '/styles/loader.css').pipe(gulp.dest(config.dist + '/styles'));

    return gulp
        .src(assets, {base: config.client})
        .pipe(gulp.dest(config.dist + '/'));
});

gulp.task('optimize', ['inject', 'sass-min'], function() {
    log('Optimizing the js, css, html');

    return gulp
        .src(config.index)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.useref())
        .pipe($.if('scripts/app.js', $.uglify()))
        .pipe(gulp.dest( config.dist ));

});


gulp.task('serve', ['inject', 'sass'], function() {
    startBrowserSync('serve');
});

gulp.task('build', ['optimize', 'copy'], function() {
    startBrowserSync('dist');
})

gulp.task('serve-dist', function() {
    gulp.run('build');
})

gulp.task('serve-docs', ['pug-docs'], function() {
    startBrowserSync('docs');
})



function clean(path, done) {
    log('Cleaning: ' + $.util.colors.blue(path));
    del(path, done);
}

function log(msg) {
    if (typeof(msg) === 'object') {
        for (var item in msg) {
            if (msg.hasOwnProperty(item)) {
                $.util.log($.util.colors.green(msg[item]));
            }
        }
    } else {
        $.util.log($.util.colors.green(msg));
    }
}

function swallowError (error) {
    // If you want details of the error in the console
    console.log(error.toString());

    this.emit('end');
}

function startBrowserSync(opt) {
    if (args.nosync || browserSync.active) {
        return;
    }

    var options = {
        port: 3000,
        ghostMode: {
            clicks: false,
            location: false,
            forms: false,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'gulp-patterns',
        notify: true,
        reloadDelay: 0, //1000,
        online: false
    };

    switch(opt) {
        case 'dist':
            log('Serving dist app');
            serveDistApp();
            break;
        case 'docs':
            log('Serving docs');
            serveDocs();
            break;
        default:
            log('Serving app');
            serveApp();
            break;
    }

    function serveApp() {
        gulp.watch([config.sass], ['sass']);

        options.server = {
            baseDir: [
                config.client,
                config.tmp
            ]
        };
        options.files = [
            config.client + '/**/*.*',
            '!' + config.sass,
            config.tmp + '/**/*.css'
        ];

        browserSync(options);
    }

    function serveDistApp() {
        options.server = {
            baseDir: [
                config.dist
            ]
        };
        options.files = [];

        browserSync(options);
    }

    function serveDocs() {
        gulp.watch([config.docsPug], ['pug-docs']);

        options.server = {
            baseDir: [
                config.docs
            ]
        }

        options.files = [
            config.docs + '/index.html',
            '!' + config.pug
        ];

        browserSync(options);
    }

}

Answer 1

I just run into the same problem while upgrading to gulp 4.

The depending tasks have to be specified as series or in parallel, just the name is not enough anymore.

Example

gulp.task('copy', ['sass-min'], function() {

Becomes

gulp.task('copy', gulp.series('sass-min'), function() {

gulp.parallel can also be used to execute the tasks in parallel

Answer 2

I had this exact problem with Gulp and it turns out that you must do away with tasks like that.

You must define your tasks as simple functions and then use your functions to define a task with gulp.series() or gulp.parallel().

I don't use this on Angular, but here's my gulpfile:

const bsync = require('browser-sync');
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const sass = require('gulp-sass');

function sync(done) {
    bsync.init({
        files: [
            '*.html',
            'assets/css/**/*.css',
            'assets/js/**/*.js'
        ],
        host: '0.0.0.0',
        server: './',
        port: 8080,
        reloadDelay: 1000,
        ghostMode: false,
        notify: false
    });
    done();
}

function styles() {
    return gulp.src('./assets/scss/**/*.scss')
        .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
        .pipe(autoprefixer({ remove: false }))
        .pipe(gulp.dest('./assets/css'))
        .pipe(bsync.stream());
}

function watchFiles() {
    gulp.watch('./assets/scss/**/*.scss', styles);
}

gulp.task('start', gulp.series(sync, styles, watchFiles));

I've got inspired by this example. Hope it helps.