Gulp Toolchain 4.0

Gulp Toolchain 4.0

Philipp Nowinski 29. Februar 2016 Releases

0 Kommentare // Lesezeit: 6 min.

It's been a while since the last update of our Gulp Toolchain. So today, we are happy to announce the release of version 4.0!

What's been going on?

While the last version was a major improvement of our workflows, it also showed a lot of glitches and some seriously annoying issues over the last months. The bigger our projects became, the longer would it take for gulp to perform some basic tasks and even the startup time of the watch task became ridiculously long. On top of that, the node and gulp eco-system grew and evolved a lot around us and we ended up relying on packages that were either way behind their latest major versions, or even became deprecated. So when I came back from christmas vacations, I sat down and revamped the whole thing. Here is what I came up with.

Gulp 4 and Node 5

After reading up on what had been going on in the Node and Gulp universe, I quickly decided that I wanted to build the next version of the toolchain on top of Node 5, wich was the latest Node version at the time being and Gulp 4. As of today, Gulp 4 is still a pre-release version. But if you go through the Gulp issue tracker, you'll quickly figure out that they are almost there and after using it for over a month now, I can say that it already feels very stable. The new Gulp version introduced a lot of major changes that really helped me to address some of the performance problems we were experiencing and is all in all the best version of a task runner I've ever used.

What's new?

So, what can you expect from the new version? Apart from an overall improvement in speed and stability, we've made some important changes.

The first thing you might notice is that the yeoman generator does not do more than copying some files now. You will get a config.json file, prefilled with values that apply to our common project structure. If your project requires a configuration that differs from our defaults, you will simply have to adjust the config file.

Why not have Yeoman adjust the config file via its questionaire? Well, the answer is quite simple. We don't need it anymore. All our projects do now follow the same basic rules, so simply dropping all the files into the project is now enough to get started. Maintaining a generator is a lot of work compared to changing a few values inside the config file and that would not have been worth the effort.

The Installation Script

We did add a script though, that will make setting up projects a little easier. One issue we were facing constantly, was people getting stuck while setting up their development instance. There are quite a few things you need to get right in order to get a properly functioning toolchain. So we added a shell-script that will take care of those steps. If you run the generator, it will provide you with a file called Executing this file will install NVM (the node version manager), download and set up the required Node version, install the correct version of gulp and finally resolve the toolchains dependencies.

Setting up our development environment is now as simple as cloning the projects repository and executing the script, instead of going through endless readmes and doing all those steps manually.

Available Gulp Tasks

So finally, here is what the toolchain can do for you now.

Styles / SCSS

The css task will grab all your .scss-files from the specified location, run them thorugh a bunch of post-processors and finally generate the .css files.

The following post-processors are included:

  • Autoprefixer - takes care of all necessary vendor-prefixes
  • sprity - an engine for image-sprites
  • inline-svg - an engine that is able to generate an inlined background-image from an svg-file (useful for icons)
  • image-dimensions - lets you use image-width and image-height functions as knwon from compass
  • clean-css - minifies your css files

Above the fold css

The abovethefold task lets you take care of rendering critical-path css inside your websites html as inline styles. To make use of it, you will need to specify the path to an HTML file that includes the stylesheet with the critical-path css and a destination where Gulp will generate the same HTML file with the css include replaced with the actual styles.

To give a quick example of how this setup could look like for e.g. TYPO3:

  1. StyleSheets/abovethefold.scss: contains all styles that shall be inlined
  2. Partials/AboveTheFold/Src/PageRenderTemplate.html: includes abovethefold.css
  3. Partials/AboveTheFold/Dist/PageRenderTemplate.html: will be generated by gulp and contains the inlined css; this partial should be rendered inside your main template. You must change your TYPO3 configuration in order to use this as the main template.


The javascript task enables a workflow relying on Browserify and CommonJS. Since JavaScript in its current state lacks the abilities of a module system, we compensate that with Browserify. It basically lets you write JavaScript modules using the CommonJS syntax as known from Node and transpires that into ES5 compatible code that can be processed by all relevant browsers. If you are new to this, you should really check it out, as it will make your code much more maintainable.

This task will grab your CommonJS source files, run them through JSHint and compile them to one minified main.min.bundled.js file that you can include in your base template.


Both the css and javascript tasks will generate sourcemaps during the compilation process. Just enable the sourcemaps feature inside your Dev-Tools to make use of them.

Image optimization

Optimizing images is an essential part of the development and deployment process. There are two tasks to accomplish this:

gulp images --ext [extension name] will optimize all images in the specified image folder inside the extension.

Inside the config.json file, you can specify additional folders that may contain images uploaded by the users of the CMS.

gulp images:uploaded will optimize all images inside those folders. You might want to run this task on a regular basis on your production machine.


One of the most important tasks during development is the browsersync task. It will fire up an Browsersync instance with LiveReload and many more cool features. You can check out the Browsersync website to read more about this.

Hint: one thing that was really bothering me during development was when I had to restart the gulp process while I already had the website open in my browser. Gulp would fire up a new tab once Browsersync restarted and I often enden up with a bunch of tabs of the same site. You can now prevent Browsersync from opening the website by passing the parameter '-s' to the gulp command.

A word about licensing

While the toolchain remains free of charge for non-commercial projects, the usage for commercial projects will require the payment of a small fee now. We will offer that in a shop later on. Meanwhile you can simply contact us via the contact form. You can also pay for support hours to give you a hand while installing and using the toolchain in your workflow.

Go, get it!

We are quite happy about this new release and would of course like to get your feedback on it. Feel free to try it and tell us about your experiences. You can find the generator also on NPM and the sources in our Gitlab repository.


Keine Kommentare.
    Dateien hier ablegen