Convert Gulp Watch in Gulp@3.9.1 to Gulp@4

Convert gulp watch in gulp@3.9.1 to gulp@4

I would recommend converting your minify-js, minify-css, clean-scripts and clean-css tasks to functions:

var dest = {
  js: 'js/dest/some-dir/**/*.js',
  css: 'css/dest/some-dir/**/*.css'
};

function cleanCss() {
  return gulp.src(dest.css)
             .pipe(clean({read:false, force: true});
});

function minifyCss() {
  return gulp.src(src.css)
             .pipe(cssmin())
             .pipe(gulp.dest(dest.css));
});

function cleanScripts() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

function minifyJs() {
   return gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
});

var minifyJsAndClean = gulp.series(minifyJs, cleanScripts);
var minifyCssAndClean = gulp.series(minifyCss, cleanCss);
var watchers = function (done) {
   gulp.watch(src.js, minifyJs);
   gulp.watch(src.css, minifyCss);
   done();
}

gulp.task('watch', gulp.series(minifyJsAndClean, minifyCssAndClean, watchers));

How to migrate to gulp v4 from 3?

You don't need to convert your tasks to named functions - although that is considered best practice and is easy to do.

To fix your watch task, try:

gulp.watch('watch', function(done) {
 watch('./app/index.html', gulp.series('html'));
 done();  
});

To change to named functions:

function html(done) {
  gulp.src(….)
    console.log('modifying the html');
    done();
};

function watch(done) {
 watch('./app/index.html', gulp.series('html'));
 done();  
});

exports.html= gulp.series(html);
exports.default = gulp.series(watch);

Note that now the watch task is not called as a string, i.e., 'watch', but just watch.

In exports.html, the gulp.series is not strictly needed as there is only one task there so exports.html= html; is sufficient.

And you only need to export a task if you wish to call it directly (as from the command line gulp html for example). If say the html task will only be called internally by other tasks then there is no need to export it.

Gulp 3.9 + Browserify 11.2 to Gulp 4.0 + Browserify 17.0

After a lot of researching, I found this blog which has the answer, or almost it has the links to the answer.

One of the links took me to the most detailed tutorial about Gulp + Browserify + Babelify it could ever exist. Here the link. These are a serie of tutorial explaining how to implement Gulp from Scratch. If you don't want to see the videos and just want the code go here.

This is my final gulpfile.js.

And this is the answer to my question:

My formerly build function in gulpfile.js (now called js)

function js(done) {
  jsFiles.map( function( entry ) {
    return browserify({
      entries: [constants.jsSRC + entry] // constants.jsSRC == "./src/js/"
    })
      .transform( babelify, { presets: [ '@babel/preset-env' ] } )
      .transform('glslify')
      .bundle()
      .pipe(source( entry ) )
      .pipe(rename( {
        extname: '.min.js'
      }))
      .pipe(buffer() )
      .pipe(gulpif( options.has( 'production' ), stripDebug() ) )
      .pipe(sourcemaps.init({ loadMaps: true }) )
      .pipe(uglify())
      .pipe(sourcemaps.write( '.' ))
      .pipe(dest(constants.jsURL)) // constants.jsURL == "./dist/js/"
      .pipe(browserSync.stream());
  });
  done();
}

The task inside the same file gulpfile.js

task("js", js);

My package.json file.

...
"devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "babelify": "^10.0.0",
    "browser-sync": "^2.26.14",
    "browserify": "^17.0.0",
    "browserify-shim": "^3.8.14",
    "core-js": "^1.2.3",
    "glslify": "^7.1.1",
    "gsap": "^3.6.1",
    "gulp": "^4.0.2",
    "gulp-connect": "^2.2.0",
    "gulp-if": "^3.0.0",
    "gulp-notify": "^3.2.0",
    "gulp-options": "^1.1.1",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^2.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-strip-debug": "^4.0.0",
    "gulp-uglify": "^1.5.3",
    "gulp-uglifycss": "^1.1.0",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
...

Note that there is a babel section and a browserify section that are also needed.

And to run that gulp task simply do:

gulp js

One last thing, the example of the tutorials (thank you Alessandro Castellani) and my final solution, are mostly the same and also contain the other tasks to process the css files, the fonts, the images, and the html file. All of those files are moved to a "production" folder, in my case called dist.

Migrating to Gulp 4, [not creating scripts and Running the server. No Error Shown]

First thing I would change is some of your tasks like

gulp.task('scripts',gulp.parallel('templates'), scripts);

gulp.task('build', gulp.parallel('styles', 'scripts','fonts'), build);

gulp.task('run', gulp.parallel('build'), run);

Here is the task signature from the docs (https://gulpjs.com/docs/en/api/task#signature)

task([taskName], taskFunction)

You have gulp.task('run', gulp.parallel('build'), run); that last run has to be part of the argument taskFunction so you probably want :

gulp.task('run', gulp.series('build', run));

gulp.task('build', gulp.series( gulp.parallel('styles', 'scripts','fonts'), build)); and

gulp.task('scripts',gulp.series('templates', scripts));

You may have other issues but start with the above changes.

Everytime I run gulp anything, I get a assertion error. - Task function must be specified

Gulp 4.0 has changed the way that tasks should be defined if the task depends on another task to execute. The list parameter has been deprecated.

An example from your gulpfile.js would be:

// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
  browser.init({server: './_site', port: port});
});

Instead of the list parameter they have introduced gulp.series() and gulp.parallel().

This task should be changed to something like this:

// Starts a BrowerSync instance
gulp.task('server', gulp.series('build', function(){
  browser.init({server: './_site', port: port});
}));

I'm not an expert in this. You can see a more robust example in the gulp documentation for running tasks in series or these following excellent blog posts by Jhey Thompkins and Stefan Baumgartner

https://codeburst.io/switching-to-gulp-4-0-271ae63530c0

https://fettblog.eu/gulp-4-parallel-and-series/

How to run Gulp tasks sequentially one after the other

It's not an official release yet, but the coming up Gulp 4.0 lets you easily do synchronous tasks with gulp.series. You can simply do it like this:

gulp.task('develop', gulp.series('clean', 'coffee'))

I found a good blog post introducing how to upgrade and make a use of those neat features:
migrating to gulp 4 by example

---

Related Topics