-1

Got fed up that i couldn't use some newer CSS Grid properties in my project and decided to upgrade my build environment.

Got to the point that i have updated node, npm, gulp, and all my packages. But i get errors trying to run gulp in my project. Been reading up on articles on the migration process from prior gulp versions to 4.0 but i haven't manage to get it to work yet.

The error i get is:

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask]

The gulpfile for my project was structured like this:

    var themename = 'akira';

var gulp = require('gulp'),
    // Prepare and optimize code etc
    autoprefixer = require('autoprefixer'),
    browserSync = require('browser-sync').create(),
    jshint = require('gulp-jshint'),
    postcss = require('gulp-postcss'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),

    // Only work with new or updated files
    newer = require('gulp-newer'),

    // Name of working theme folder
    root = '../' + themename + '/',
    scss = root + 'sass/',
    js = root + 'js/',
    img = root + 'images/',
    languages = root + 'languages/';


// CSS via Sass and Autoprefixer
gulp.task('css', function() {
    return gulp.src(scss + '{style.scss,rtl.scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'expanded',
        indentType: 'tab',
        indentWidth: '1'
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer('last 2 versions', '> 1%')
    ]))
    .pipe(sourcemaps.write(scss + 'maps'))
    .pipe(gulp.dest(root));
});

// JavaScript
gulp.task('javascript', function() {
    return gulp.src([js + '*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest(js));
});


// Watch everything
gulp.task('watch', function() {
    browserSync.init({
        open: 'external',
        proxy: 'www.akira.test',
        port: 8080
    });
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
    gulp.watch(js + '**/*.js', ['javascript']);
    gulp.watch(root + '**/*').on('change', browserSync.reload);
});


// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);

When looking through the error message and follow it to the first mention of my gulpfile.js gives me:

themes/gulp-dev/gulpfile.js:57:6

And that should be this line:

gulp.watch(root + '**/*').on('change', browserSync.reload);

But i hav no real clue on how to refactor this old code to work with gulp 4.0 Any help would be much appreciated!

nicklas bryntesson
  • 149
  • 1
  • 3
  • 12

1 Answers1

0

Change your line;

gulp.task('default', ['watch']);

that is gulp 3 syntax. Use this instead:

gulp.task('default', gulp.series('watch'));

Since your second argument is an array and not a function - which is necessary under gulp 4 - gulp doesn't think you have specified a task function to run.

Mark
  • 143,421
  • 24
  • 428
  • 436
  • This indeed seems to get me closer to a solution, but i still get an error that seems to be connected to my watch task. (this time on line 55,7 - gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']); ) In a article from liquidlight i read last night trying to figure this out, it said: "With gulp 4, this doesn't seem to be the case. Instead, the watcher can fire some standard functions, but if you need filename based operations, these need to be moved to the changed function." could this be the issue? – nicklas bryntesson Mar 16 '19 at 10:58