How Gulp js improves your workflow and site performance

At Boann we are constantly looking for ways to work more efficiently and improve our workflow.
Building websites is largely repetitive in the basics: almost every website has buttons, tables, a contact form, a navigation and so on.

Especially if you have been developing websites for some time, you will begin to see certain patterns in that building.
Gulp helps you save time and prevents you from having to do everything completely manually at every site.

A brief introduction

Gulp is American-made, made by a handful of smart developers at We Are Fractal. It elaborates on the concepts of Grunt, which in turn originated on the basis of Node.js. Node.js is JavaScript (familiar terrain for many developers), but then on the server.

The great thing about Node is that the community has jumped a lot and has built a framework in 6 years with which you can do just about anything. In other words – under the heading of local ‘build streaming’ – use Gulp.

The concept of Gulp

Gulp is essentially a simple package, making it easy to pick up. In Gulp three concepts are central: packages, tasks and watchers.


Because Node – and therefore also Gulp – consists of packages, we can easily compose a collection that does exactly what we want.
We do this in the terminal with the following command:¬†npm install –save-dev It is installed in a few seconds and you can start.

Packages are available in all shapes and sizes. From functional packages (for example front-end developers) to so-called ‘dependencies’: packages with functionality on which other packages can be based.

You compose a web of all modules, as it were, and thus have full control over what happens. We do this with a Gulpfile: a project file with which we tell Gulp which packages they all have to load.

A few packages that we use daily at BOANN:


BOANN works with almost all websites with SASS – a so-called CSS preprocessor – with which we add extra skills and order to our CSS. Gulp-sass makes sure that our SASS code is converted into (useful for the browser) CSS.


The speed of websites is becoming increasingly important. That is why it is important for web developers to ensure that their code ends up with the end user as optimally and as little as possible, so that it does not have to wait long for the site to load. gulp-minify-css is the package we use to perform this optimization for our CSS code.


gulp-uglify is the JavaScript nephew of gulp-minify-css and also ensures that code is made as compact as possible. This also helps us to work more efficiently and ensures that the website profits from the website to the end user.

gulp autoprefixer

At the moment there are four internet browsers for which it is advisable to optimize: Google Chrome, Mozilla Firefox, Apple Safari and Microsoft Internet Explorer. These often have their own nuances within CSS and developers spend a lot of time optimizing for outdated browser versions. Autoprefixer is a package that fully automates this problem; you can indicate exactly which versions of which browsers you want to support and then the optimization runs automatically.


Suppose you collect all the packages you want to use and you put them together in the Gulpfile. All information is then present in the file, but you still have no way to tell the collection what it should do exactly.

This is where Tasks comes to the rescue. With Tasks, or ‘tasks’, we tell Gulp what exactly to do and with which packages. A typical task looks like this:

gulp task

We first create a ‘build’ task, then specify a source file with ‘src’ (the global SCSS file) and then use three ‘pipes’ to make edits on this source file. There is always only one source file, but there are infinitely many pipes to define. A pipe uses one of the many packages that we have spoken before.

With tasks we can then edit source files down to the last detail. For example, the Gulpfile currently contains a task that intelligently combines four different JavaScript files into one file. After that, this one file is reduced to a maximum and written to a targeted folder. The result: more efficient, faster code that makes websites / applications work smoother.


Finally, many Gulp files contain so-called watchers: a concept with which Gulp goes into third gear.
A watcher ‘looks’ at a file or set of files, notices when changes occur and, if necessary, makes himself heard.

How the watcher reports to you, you can define yourself with an action. This is, for example, a notification such as “Hi boann, this file has been modified” or the execution of a task. Thanks to the task-link, we can realize the following workflow with our CSS code:

gulp workflow

Harrit van Beek

Founder at BOANN
Software Developer at BOANN
System architect at BOANN

Leave a Reply

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

Pin It on Pinterest