Gulp Cannot Read Property 'apply' of Undefined

Gulp is a fantastic build tool for compiling your SCSS, Less and SVG sprites that we use at Liquid Light.

For a while now, the gulpJS team take been working on Version 4. This version features some nice additions to the build tool just does likewise characteristic some substantial breaking changes. Upgrading is simple, only does require a few tweaks.

Upgrading gulp to v4

Note: The $ shows the command is to exist run on the control line and shouldn't exist typed

          $ npm install -one thousand gulp        

          $ gulp -v CLI version ii.0.1        

If you lot are in a gulp project, a local version will be listed below the CLI version

Install gulp 4 locally

Once globally installed, gulp v4 will then need to be installed on a per-project footing.

          $ npm install gulp --save-dev        

If in your package.json file gulp is listed nether dependencies, then replace the --salve-dev with just --salve.

You should now accept gulp v4 installed and ready to go. This can be verified by running the version control higher up

Running gulp -v once once again should now give you lot

          $ gulp -five CLI version two.0.1 Local version iv.0.0        

Updating your gulpfile

Now you lot have v4 successfully installed, you lot'll need to do a few updates to your gulpfile.js. The best affair to do is run gulp and follow the errors that you get.

When you go an error, you lot volition be faced with several lines of what appears to exist jargon.

The offset thing you need to look for is the error message. This volition be something like

          Error: Error message here        

Make a notation of that. The second line to wait for is the 1 that includes the path to your gulpfile with some numbers afterward. This is what mine looks similar:

          at Object.<anonymous> /Sites/gulp-v4/gulpfile.js:418:6        

This tells y'all the mistake was generated in your gulpfile at line 418, character 6.

I've tested below some errors I came across during the update and how to fix them.

AssertionError: Job function must be specified

This fault for me was thrown considering of:

          gulp.task('default', ['del'], part() {     // default task code here });        

Where the del task is being run before the default task.

To resolve this, you demand to specify that the del and following function are to be run in a series.

To resolve this, change the code to:

          gulp.task('default', gulp.series('del', function() {      // default chore code here }));        

Annotation: because you are opening a parenthesis for gulp.serial, don't forget to add an extra closing ane after the function.

Make certain you update the balance of your gulpfile to follow accommodate.

The gulp has updated this syntax for running tasks in series to add the functionality of running tasks in parallel with gulp.parallel. More tin can be read nearly it in the gulp docs.

Did you forget to signal async completion?

          The following tasks did non consummate: default, del Did yous forget to betoken async completion?        

This mistake occurred on an bearding role (the one occurring afterward del in the instance above).

Gulp v4 requires a stream, hope, upshot emitter, child process or observable to be returned from a part or chore. This was resolved in the simplest instance of passing a parameter into the part and firing it later on the task is completed.

East.m.

          gulp.task('default', gulp.series(part(washed) {         // task code here     done(); }));        

(Annotation the washed in-between the parenthesis when the function opens and and then it firing at the stop).

I specifically got this mistake when trying to run the del npm package.

My del packet was set to call del.sync which returns an array, Gulp requires one of the stream, promise, event emitter, child process or observable to be returned, which del does by default.

          return del(dirs);        

Gulp watcher with alter event and paths

With gulp v3, the watcher would return the path of the modified file within the function information technology called.

For instance, the output for the below would exist an object with the location of the file modified and event (due east.g. changed).

          gulp.chore('watch', role(){     gulp.picket('path/to/css/*.css').on('change', function(upshot) {         console.log(event.path);         console.log(event.blazon);         // lawmaking to execute     }); });        

With gulp 4, this doesn't seem to exist the case. Instead, the watcher can burn down some standard functions, but if you demand filename based operations, these need to be moved to the changed office.

          gulp.task('scout', role(){     gulp.picket('path/to/css/*.css')     .on('change', function(path, stats) {         console.log(path);         // code to execute on modify     })     .on('unlink', , function(path, stats) {         console.log(path);         // lawmaking to execute on delete     }); });        

If you did need to fire a generic function when a file is changed while being watched, the gulp tutorials accept an example of this.

---

Just a small reminder, if you are upgrading to Gulp 4 and have a shared project, the other developers volition demand to upgrade as well.

If you take encountered whatsoever other errors, then experience gratuitous to drop a comment beneath or tweet us - we'd be more than happy to aid and include the solution in a higher place for others!

---

Update thirteen/08/2018: 2 years later on and Gulp iv still hasn't been released!

This commodity was posted in Development, Tools by Mike Street

• 

  Mike Street

  Mike is our front-end developer who spends his days buried in CSS and Gulp. His evenings and weekends are spent tinkering with electronics and riding bikes. mikestreety.co.uk

hazelwoodexambeir1955.blogspot.com

Source: https://www.liquidlight.co.uk/blog/how-do-i-update-to-gulp-4/

Share this post