An Introduction to JavaScript Automation with Gulp

As web developers, we sometimes find ourselves repeating the same tedious tasks again and again. If you consider how much time is wasted by running a build command or hitting refresh on your browser, you will realize that you can be saving a lot of time. Additionally, by automating your processes, you can stay focused on the task at hand instead of temporarily leaving the zone (your state of productivity).

In this JavaScript automation tutorial, you will learn how to automate yourdesignand development process with Gulp. If you are moredesign-oriented, I encourage you to overcome any fears you have and to read on. On the other hand, if you are a developer you will be able to sweep right through this once you understand the logic behind it.

Gulp is a build system that employs Node.js’s streams to implement an asynchronous source-destination approach to automation. Everything is written in JavaScript, so it is easy for anyone with intermediate coding knowledge to get started. A Gulp build process consists of a collection of watchers and tasks. Additionally, the community behind Gulp maintains a huge plugin directory within npm which helps accomplish any task from concatenating JavaScript to creating icon fonts from SVGs.

Alternatives to Gulp

There are plenty of alternatives out there, most of which have spawned in the past couple of years - the most notable one being Grunt. The contest between Gulp and Grunt will never have a clear winner, since they both have their pros and cons, hence I will avoid delving deep into that. In a nutshell, Grunt’s heavy reliance on config is what steers people towards Gulp’s JavaScript approach. In the meantime, native GUI implementations such as Koala have gained some ground, mostly from people that withhold getting into coding. However, with the bundled applications it’s impossible to reach the level of customizability and extendability that Gulp offers.

Process Automation Alternatives

Plugins

Plugins are the means through which gulp accomplishes each process. Plugins are installed through npm and initiated using require.

Tasks

For Gulp, tasks always have a source and a destination. In between them lie the pipes that call each plugin and output the transmuted results to the next pipe.

Globs

Globs are wildcard patterns that refer to files. Globs or arrays of globs are used as inputs in task source.

Watchers

The watchers watch the source files for changes and call tasks whenever a change is detected.

gulpfile.js

This is the JavaScript file that the gulp command points at. It contains everything from the tasks to the watchers or other pieces of code used by tasks.

4

A Straightforward Task

Code Walkthrough

To further improve this process automation implementation, you may try to include a few other Gulp plugins. For instance, you may want to minify the final product of your task using gulp-minify-css and automatically add vendor prefixes with gulp-autoprefixer.

2

Employing a Watcher

I have created a watcher starter kit that you can use straight away. You can download it from toptal-gulp-tutorial/step2. It includes an enhanced version of the previously created SCSS task, and a watcher that watches the source files and calls the task. In order to start it, use the following command:

gulp This command starts the default task which initiates the watcher. At this point you can edit any of the SCSS files and watch as the CSS files get recompiled. You will be able to see Gulp’s notifications in the command line.

4

Code Walkthrough

We have set up a watcher for our task with only 3 extra lines of code. That said, the watcher starter kit does not differ much from the introductory example. In this section, we will go through all the additions and alterations.

return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

In this example, Gulp source is provided with an array of globs. The first one includes all the files that end in .scss also in subfolders, and the second one excludes the ones that start with _. This way we can use SCSS’s built-in function @import to concatenate the _page.scss file.

gulp.task('default', ['scss'], function() {

Here we define the default task. The scss task is run as a dependency before default.

gulp.watch('scss/**/*.scss', ['scss']); Finally, we call Gulp’s watch function to point at any file ending with .scss and whenever a change event occurs, to run the scss task.

3

Now you are ready to create new watchers for other automated processes such as JavaScript concatenation, code hinting, CoffeeScript compilation, or anything that else that might come in mind. To delve deeper into this JavaScript automation implementation, I propose adding gulp-notify which will notify you when a task is run. Also, you can create a separate task to minify the resulting CSS code and make the scss task run as a dependency to that. Finally, you can use gulp-rename to add the .min suffix to the resulting files.

1

Advanced Gulp Plugins for JavaScript Automation

There exist thousands of plugins in Gulp’s plugin base, some of which go far beyond simple JavaScript automation of a build process. Here are a few outstanding examples:

Browser Sync

BrowserSync injects CSS, JavaScript and automatically refreshes the browser whenever a change is made. Additionally, it contains a ghostMode feature which can be used to scare your colleagues or to greatly speed up your browser testing.

Browserify

Browserify analyzes the require calls in your application and converts it to a bundled JavaScript file. Also, there is a list of npm packages that can be converted into browser code.

Webpack

Similar to Browserify, Webpack aims to convert modules with dependencies to static files. This one gives more freedom to the user as to how the module dependencies will be set, and does not aim to follow Node.js’s code style.

In this process automation tutorial I have demonstrated the beauty and simplicity of using Gulp as a build tool. By following the steps described in the tutorial you will now be ready to fully automate your software development process both in your future and your legacy projects. Investing some time into setting up a build system for your older projects will certainly save you precious time in the future.

Developers often want to automate certain repetitive and tedious tasks to save time as well as to stay focused on the task at hand. In this article, Toptal engineer Antonios Minas demonstrates the beauty and simplicity of using Gulp and JavaScript automation.

As web developers, we sometimes find ourselves repeating the same tedious tasks again and again. If you consider how much time is wasted by running a build command or hitting refresh on your browser, you will realize that you can be saving a lot of time. Additionally, by automating your processes, you can stay focused on the task at hand instead of temporarily leaving the zone (your state of productivity).

In this JavaScript automation tutorial, you will learn how to automate your design and development process with Gulp. If you are more design-oriented, I encourage you to overcome any fears you have and to read on. On the other hand, if you are a developer you will be able to sweep right through this once you understand the logic behind it.

and initiated using require.

Tasks

For Gulp, tasks always have a source and a destination. In between them lie the pipes that call each plugin and output the transmuted results to the next pipe.

Globs

are wildcard patterns that refer to files. or arrays of globs are used as inputs in task source.

Watchers

The watchers watch the source files for changes and call tasks whenever a change is detected.

gulpfile.js

This is the JavaScript file that the gulp command points at. It contains everything from the tasks to the or other pieces of code used by tasks.

-gulp-tutorial/step2. It includes an enhanced version of the previously created SCSS and a watcher that watches the source files and calls the task. In order to start it, use the following command:

gulp This command starts the default task which initiates the watcher. At this you can edit any of the SCSS files and watch as the CSS files get recompiled. You will be able to see Gulp’s notifications the command line.

file.

gulp.task('default', ['scss'], function() { Here we define the default task. The task is run as a dependency before default.

gulp.watch('scss/**/*.scss', ['scss']); Finally, we call Gulp’s watch function to point at any file ending with .scss and whenever a change event occurs, to run the task.

task run as a dependency to that. Finally, you can use gulp-rename to add the .min suffix to the resulting files.

packages that can be converted into browser code.

Webpack

Similar to Browserify, Webpack aims to convert modules with dependencies to static files. This one gives more freedom to the user as to how the module dependencies will be and does not aim to follow Node.js’s code style.

I have demonstrated the beauty and simplicity of using Gulp as a build tool. By following the steps described in the tutorial you will now be ready to fully automate your software development process both in your future and your legacy projects. Investing some time into setting up a build system for your older projects will certainly save you precious time in the future.

Developers often want to automate certain repetitive and tedious tasks to save time as well as to stay focused on the task at hand. In this article, Toptal engineer Antonios Minas demonstrates the beauty and simplicity of using Gulp and JavaScript automation.