Gulpinst.start.apply(Gulpinst, Torun); ^ Typeerror: 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 squad have been working on Version iv. This version features some nice additions to the build tool but does also feature some substantial breaking changes. Upgrading is elementary, but does require a few tweaks.

Upgrading gulp to v4

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

          $ npm install -thousand gulp        

          $ gulp -five CLI version 2.0.one        

If y'all are in a gulp project, a local version will be listed below the CLI version

Install gulp 4 locally

In one case globally installed, gulp v4 will then demand to be installed on a per-project basis.

          $ npm install gulp --salvage-dev        

If in your packet.json file gulp is listed nether dependencies, then replace the --save-dev with but --save.

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

Running gulp -v in one case over again should at present give yous

          $ gulp -v CLI version ii.0.1 Local version iv.0.0        

Updating your gulpfile

Now you have v4 successfully installed, yous'll need to do a few updates to your gulpfile.js. The all-time thing to practise is run gulp and follow the errors that y'all get.

When yous go an error, you will be faced with several lines of what appears to be jargon.

The starting time thing you demand to await for is the mistake message. This will be something like

          Error: Error bulletin here        

Make a note of that. The second line to look for is the ane that includes the path to your gulpfile with some numbers afterwards. This is what mine looks like:

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

This tells yous the fault was generated in your gulpfile at line 418, grapheme 6.

I've tested beneath some errors I came beyond during the update and how to prepare them.

AssertionError: Chore part must exist specified

This error for me was thrown because of:

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

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

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

To resolve this, change the code to:

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

Note: because you are opening a parenthesis for gulp.series, don't forget to add an extra endmost i afterward the role.

Brand sure you update the rest 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 can be read about it in the gulp docs.

Did you forget to signal async completion?

          The post-obit tasks did not complete: default, del Did you lot forget to signal async completion?        

This error occurred on an anonymous function (the one occurring after del in the case above).

Gulp v4 requires a stream, hope, event emitter, kid procedure or observable to be returned from a part or task. This was resolved in the simplest example of passing a parameter into the office and firing it afterwards the job is completed.

E.g.

          gulp.task('default', gulp.serial(function(done) {         // task code hither     done(); }));        

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

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

My del parcel was fix to telephone call del.sync which returns an array, Gulp requires one of the stream, promise, event emitter, child process or observable to exist returned, which del does past default.

          return del(dirs);        

Gulp watcher with change event and paths

With gulp v3, the watcher would render the path of the modified file within the office it chosen.

For example, the output for the below would be an object with the location of the file modified and consequence (e.g. changed).

          gulp.task('spotter', part(){     gulp.watch('path/to/css/*.css').on('change', function(event) {         panel.log(effect.path);         console.log(upshot.type);         // code to execute     }); });        

With gulp 4, this doesn't seem to be the case. Instead, the watcher tin fire some standard functions, but if you demand filename based operations, these need to be moved to the inverse part.

          gulp.chore('watch', function(){     gulp.scout('path/to/css/*.css')     .on('change', function(path, stats) {         console.log(path);         // lawmaking to execute on change     })     .on('unlink', , function(path, stats) {         panel.log(path);         // code to execute on delete     }); });        

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

---

Just a small reminder, if you are upgrading to Gulp 4 and have a shared project, the other developers will need to upgrade also.

If y'all have encountered whatever other errors, and so feel free to drop a comment below or tweet us - we'd be more happy to assistance and include the solution above for others!

---

Update 13/08/2018: Two years later and Gulp 4 still hasn't been released!

This article was posted in Development, Tools past Mike Street

• 

  Mike Street

  Mike is our forepart-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

marshalleired1968.blogspot.com

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

Share this post