terminalgulpgulp-sasspostcssgulp-4

How can I migrate Gulp3 to Gulp4 (gulpfile.js)?


Im having problems to update my gulpfile.js from GULP3 to GULP4 I tried to update with gulp.series() and gulp.parallel() My Gulpfile is like this :

var gulp = require('gulp')
var browserSync = require('browser-sync').create()

gulp.task('serve', function(){
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  })
})
gulp.task('css', function(){

  var processors = [
  //postcssPlugins
  ]

  return gulp.src('./srcFiles')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./DestFiles'))
    .pipe(browserSync.stream())
})
gulp.task('watch', function(){
  gulp.watch('srcFiles', ['css'])
  gulp.watch('DestFile.Html').on('change', browserSync.reload)
})
gulp.task('default', ['watch', 'serve'])

The error I get is Task function must be specified


Solution

  • There are a number of significant differences between Gulp 3 and Gulp 4 that you need to be aware of. For instance, Gulp.js 4.0 introduces the series() and parallel() methods to combine tasks:

    For a complete walk-through of how to set up your gulpfile.js in Gulp 4, I recommend the detailed tutorial found at Coder Coder.

    Meanwhile, a quick re-write of your code would roughly look something like this...

    var gulp = require("gulp"),
        browserSync = require("browser-sync").create();
    
    var paths = {
        styles: {
            src: "./path/to/scss/files/**/*.scss",
            dest: "./folder/to/output/css/file"
        }
    }
    
    function css(){
        return gulp
            .src(paths.styles.src)
            // ... CSS Preprocessor Plugins
            .pipe(gulp.dest(paths.styles.dest))
            .pipe(browserSync.stream());
    }
    
    function reload(){
        browserSync.reload();
    }
    
    function watch(){
        browserSync.init({
            server: { baseDir: "./dist" }
        });
        gulp.watch(paths.styles.src, css);
        gulp.watch('DestFile.html', reload);
    }
    
    exports.watch = watch;
    exports.css = css;
    exports.default = gulp.parallel(css, watch);
    

    All you would then need to do is run gulp or gulp watch to initialize the BrowserSync server and begin watching for changes.

    If you need to only recompile the CSS, you could run gulp css.

    To see the list of gulp tasks available, run gulp --tasks.