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
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.
font: Simply copies fonts to the public directory
Theme Gulpifier comes as Node module. In order to install it run the following:
# Install the module globally. npm install -g theme-gulpifier
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
# Go to your project root directory. cd PROJECT_NAME # Run theme-gulpifier and follow the instructions. theme-gulpifier
Once Theme Gulpifier has been added to a theme, build tasks can be enabled, disabled and configured editing the following config file
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.
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.