Tech 2. Jun. 2017

Using GulpJS as website generator

Usually “GulpJS is a toolkit for automating painful or time-consuming tasks in your development workflow”. And that’s what we are using gulp for most of the time. Specially the asynchronous approach combined with controlling the flow as parallel or serial tasks and the pipelining make gulp quite powerful.

Thinking about static website and site generators, we looked for something to replace Jekyll - well, just to go on JS/nodeJS technology and leave ruby. The processes of a static site generator are nothing more than a bunch of different tasks for gather, process and render data and resources in a specific way.

For the Bombardier ON:TRACK website, we decided to use GulpJS as site generator.

The task set is:

  • A Contentful task to import content to JSON
  • A processing pipe to reduce and preprocess the data
  • A task for transport media assets from Contentful to Cloudinary, specially for videos
  • Some common tasks for CSS and JS rendering incl. merge, minify, lint and so on
  • HTML template rendering with Nunjucks

The build and deployment does not need anything extra due to the great service of Netlify.

Pro:

  • Fast and easy site generator with a JS stack
  • Modular - nearly atomic - task and pipe structure
  • Usage of GulpJS with reusable tasks and pipe from other projects
  • Usgae of everything from the huge wide open source world of npm modules

Cons:

  • Website features have to be implemented into the generation process, which feels a little like building our own CMS
  • Realising more complex website content structures could become a mess, but that depends on the data management system as well