Theme gulpifier

Theme Gulpifier

Nowadays, the frontend of most applications and websites requires a lot of automation and solid building processes.

Theme Gulpifier is a basic Gulp build system that anyone can use as a boilerplate for building the theme assets in their CMS, web project or hybrid mobile app.

Here are the main features:

  • Watch and build your themes from any directory in your project (no need to cd to the directory containing the gulpfile)
  • Watch and build multiple themes at the same time
  • SASS compilation, optimisation and minification
  • ES6 support
  • JS validation, concatenation and minification
  • Images and SVG optimisation
  • Browser sync support
  • Compatible with existing gulpfiles and package.json

Build tasks

Theme Gulpifier is a set of build tasks that take theme assets from a specified location, and generate a distribution version in a public directory.

In the specific here are the available tasks

  • image: Optimises and minifies GIF, JPEG, PNG and SVG files
  • sass: Compiles sass, cleans and minifies CSS and generate sourcemaps.
  • javascript: Validates Javascript (ES6), creates and minifies JS bundles, and generates sourcemaps
  • font: Simply copies fonts to the public directory
  • vendor: Makes Node.js modules available to your public directory. Useful if you need, for instance, to reference Javascript or CSS files in your templates.

Installation

Theme Gulpifier comes as Node module. In order to install it run the following:

bash

# Install the module globally.
npm install -g theme-gulpifier

How to use

In order to initialise our theme we need to run theme-gulpifier in the project root directory, select the theme directory and follow the instrunctions. 

This will add a few files and directories to your project. In details it will add or amend the existing package.json, add or amend the existing gulpfile.js and add a directory called gulpfile to your theme with all the necessary to build your theme assets.

It is recommended to commit all these files and directories so you won't lose the configuration and need to re-initialise theme-gulpifier again.

bash

# Go to your project root directory.
cd PROJECT_NAME

# Run theme-gulpifier and follow the instructions.
theme-gulpifier

Configure and build

Once Theme Gulpifier has been added to a theme, build tasks can be enabled, disabled and configured editing the following config file your_theme_path/gulpfile/config.js

When you are happy with the configuration you can build your assets running either gulp build or simply gulp. The latter will watch your source files and re-build them when they get changed.

Contribute

Although Theme Gulpifier is based on my personal preferences and workflows, it is open source therefore feel free to add new features and submit PR's if you feel this could benefit other developers.

Alternatively, if you have any question, suggestion or critic please, leave a comment below.