Gulp – Automating Tasks

What is Gulp?

Gulp is a Node.js based tool to allow recurring tasks to be automated.

Here some typical examples z.B.

  • (Re-)Generate CSS when you change SASS files
  • (Re-)Generate JS when you change JS files
  • Use sourcemaps and not minified JS/CSS in a local environment but remove sourcemaps and use minified versions on live environment

Gulp 3 vs Gulp 4

Currenty (Mai 2021) ithe current verson of Gulp is 4.0.2
This version is a breaking change in comparison to the old version 3.X

What has changed since Gulp 3?

Gulp 4 changed how the “Task” system works and now allows parallel and series tasks to be defined.

E.g. in the following Task named “default” Gulp executes the tasks “sass” and “scripts” in parallel:

gulp.task('default', gulp.parallel('sass', 'scripts'));

Besides “gulp.parallel” there is also “gulp.series

gulp.task('default', gulp.series('lint', gulp.parallel('sass', 'scripts'), 'deploy'));

In this example the task “lint” will be executed first. After it is done the tasks “sass” and “scripts” are executed in parallel and after that finally the task “deploy

To execute tasks iniside another task use:

(gulp.parallel('sass', 'scripts'))();

How all this comes together in a rather nice SCSS/JS/BrowserSync Setup see the next post.

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.