Task automation with Gulp.JS

Gulp.JS is an open source Javascript toolkit to improve your development workflow. It is a task runner build on top of Node.JS and npm used to automate repetitive tasks in web development. Task runners like gulp are used frequently (but not exclusively) during the build process. Examples of such tasks include compiling SASS to CSS, autoprefixing CSS, minification, file concatenation, string replacement within a file, renaming files, injecting code into files, transpiling modern Javascript (ES6+) to browser compatible ES5 with babel, watching for changes in files to automatically reload the development server (hot reloading) and everything else you think that should (and could) be automated.

This article will not compare gulp to webpack, npm scripts or rollup.js. There have been many great articles written about that already. The goal of this blog post is to show you with practical examples how to get started with gulp and setup a build process that includes the folowing tasks:

• compile SASS to CSS
• Autoprefix CSS
• Minify your CSS and Javascript files
• Transpile your ES6+ code to ES5 via babel
• Create sourcemaps for the minifcation and transpiling
• Rename your files
• Inject files into other files
• Create a file watcher and development server that automatically reloads when a watched file changes

Setup & Installation

In order to follow this post and try the examples you need to have a recent version of Node.JS and npm installed (npm comes automatically with a recent node version). You can check if you have Node.js and npm installed by executing in your terminal the following two commands (one after another)

“node -v”

and

“npm -v”

and wait if there is a version number popping up. If you don’t have it yet installed I would recommend you to do it first. You can download an install Node.JS directly from here. Personally I prefer to install Node.JS through nvm (node version manager) because it gives you the flexibility to switch between different node versions at ease. I installed nvm via homebrew but you can also use curl or wget. There are many instructions on how to intstall it so I will not repeat that here but trust in you that you will manage it :)

Lets start:

1. Install the gulp-cli in order to start gulp commands from your terminal with: “npm install -g gulp-cli“
2. Create a new folder “gulp-example”
3. Within that folder create the following files:
   1. package.json
   2. gulpfile.js
4. Within gulp-example create two subfolders “src” and “build”.
5. Open the src-folder and create the following files:
   1. index.html
   2. main.js
   3. style.scss

If you are lazy you can use the following terminal command to setup everything:

Package.json

The package.json stores among a few basic informations about your project all packages that need to either run for developing (devDependencies) or are mandatory for the final application (dependencies). By running npm install all specified packages will be downloaded and stored in a node_modules folder within your project.

In order to setup the build process mentioned in the introduction we need to download some plugins first. Everything what we need is specified in the devDependencies. Please copy the following content into your package.json:

Open your terminal and cd into your /gulp-example directory (if you used my provided command to setup everything you are already in the gulp-example directory). Run npm install in order to automatically download and install all node modules. Note that by the time you read this article some of the plugins might be outdated already. If you want to update your packages run npm update but be aware that incompability of versions might break the setup. If this happens go back to the specified setup here.

Gulpfile.JS

The gulpfile.js is the heart of our gulp setup in which we will write all our gulp tasks. If you are familiar with Javascript you will pickup gulp very quickly because it is essentially only writing functions.

Compile SASS, Autoprefix, Minify, Sourcemaps

Every gulpfile should start with the plugins that are used. Please note that I am using ES6 syntax. If you are not familiar with this please see my es6 article series. Since we also compile our sass/ scss to css we need to specify node-sass as our compiler.

Now we will write our first gulp task. The first argument of our task method is the name of our gulp task ‘compile:sass‘. With the second argument we define a function that returns multiple chained methods. With gulp.src we specify where our style.scss is located. The “pipe” method takes in the output of the previous function, applies new functionality and passes it to a potential next function. Pipe-chaining is very common in gulp tasks and you will see a lot of them. In this case we run our sass compiling and add some error logging. Last but not least we output the compiled css (and any other file we will modify from now on) with gulp.dest into a temp folder. This is necessary for us to create at a later stage without any effort the same pathing for our production and development environment. We will clean this folder later up with another “clean”-task so it will not be visible for you in the end.

Lets add also autoprefixing, minification and sourcemaps. The tasks are very self explanatory which is one of the great things about gulp.

Transpile ES6+ to ES5 with Babel, Minify JS

Before we can use babel to transpile our Javascript ES6+ Code to browser compatible ES5 we need to create a “.babelrc” file and specify what presets we want to use. We will create the file within the root level of our app (where the gulpfile.js is). The setting “modules: false” prevents babel setting “use strict”. Not that I don’t like “use strict” (I am a big fan), but I want to be in control of where it is set. A .babelrc file is technically not necessary, it would also be possible to specify the config within the gulpfile, but I think it is nicer to have it in its own file. Babel will look automatically for a .babelrc file and use it if it is provided.

Now we add the actual transpiling tasks to our gulpfile.js and a task for minification. Note that we need to require additional plugins for our new tasks.

Combine minifier

Since we have already two minifying tasks, we can combine them both into one task. It also gives us the chance to learn about a new gulp method gulp.parallel. As the name indicates this method allows to run both tasks simultaneously. The sibling of gulp.parallel is gulp.series which runs one task after another.

Cleanup after ourselves

Since we created a temp folder during the build process and don’t need it further we will create a task to automatically delete it.

index.html

We can use gulp-inject to inject Javascript files and Stylesheet files into our index.html file. See how it is done in the following example (the commented lines are the placeholder which gulp automatically identifies and use for insertion):

Note that the index.html file is in the src subfolder of your project.

style.scss

Some SCSS for testing our setup. Note that the style.scss file is in the src subfolder of your project.

main.js

Some Javascript for testing our setup.

Note that the main.js file is in the src subfolder of your project.

Transfer files

Our stylesheet and javascript files are going to be served by a server which requires a path to the files. In order to make it easy for both our production and development server to serve the files we will create the same relative pathing and therefor transfer all files into a temp folder which sits inside our development and production base folder (gulp will create the folders by itself if they are not yet existing).

Lets start with transfering files for development:

Now we will  do the same for production:

Hot Reloading Live Server

A great development experience includes a local webserver that automatically watches your files and reloads your browser tab on every saved code modification. This is how you do it:

First we will define a new const “connect”, require “gulp-connect” and make a task using it to connect to our server specifying the following specs:

The next task opens for our convenience the browser tab as soon as our server is started:

Now we will create a file watcher that observes our files and triggers a reload as soon as our files change and are saved:

Build development environment

Let’s make a build specifically for our development area. We will leave out what we don’t need (minification) and add some additional features (server with file watcher and hot reloading):

Now lets tie it all together in one handy command (running the dev build, connecting to the development sever, open it and start the file watcher):

Build production environment

Lets combine all our tasks necessary for our production environment in one task “gulp prod” which we will call in series (one after another):

Try it out

In order to test it we need to use the gulp-cli and open our terminal. Each command will take a few seconds to run. You will be notified about the process automatically through the gulp cli. If everything worked fine you should have a new folder build/prod or build/dev (depending on the command) with one index.html and a temp folder containing your style and javascript files.

Please “cd” in the root project folder (where the gulpfile.js is) and run the following commands:

Build Development

gulp dev

Build dev and start hot reloading dev server

gulp serve

Build Production

gulp prod

Summary

If you want to have the whole gulpfile at once I put it together for you here: