The best Gulp build tool for WordPress
As developers, we have a seemingly endless supply of tools at our disposal thanks to the hard work and generosity of the wider development community who, by and large, share their hard work in the hope of making their peers' lives that little bit easier.
At Go Tripod we're always on the lookout for new ways to streamline our processes and improve the quality of our work. Task runners are a great example of this.
Utilising JavaScript, programs like Gulp and Grunt can automate all kinds of labour-intensive tasks including, for example:
- compiling, concatenating and compressing assets (eg. images, CSS, JS)
- live browser reloading for speedy development and testing
- auto-prefixing for optimal browser support
With these jobs running automatically in the background we're able to focus entirely on the task at hand. This increases productivity and makes sure the code we're writing is as performant and compatible as it can be.
Our current build tool of choice is a modified version of the excellent WPGulp by WordPress aficionado, Ahmad Awais. It does most of the things we need out of the box but since we use Timber to separate logic from styling I've amended it to watch .twig files as well as .php files.
Along with a few other minor adjustments, the result is a fast and feature-packed workflow which allows us to build WordPress sites of the highest quality in record time. ????
Dynamically generating responsive images with Timber's resize filter and the srcset attribute
Timber has loads of useful filters built in which can make all kinds of jobs much easier. One of those jobs is resizing and cropping images, for which we can use the resize filter. The syntax is simple, as with all things Twig - we simply add the filter to our image source, passing through a width or height to resize or both to crop.
The following example will resize the image to a width of 300px while retaining its aspect ratio:
{{ item.src|resize(300) }}The following example will resize the image to a height of 300px while retaining its aspect ratio:
{{ item.src|resize(0, 300) }}The following example will crop the image to a width and height of 300px:
{{ item.src|resize(300, 300) }}We can then define multiple sizes and pass these into a srcset attribute to make sure we’re serving a suitable image size based on the device viewport. This is especially important for mobile devices who don’t need to download and display a full HD hero image on a 320px wide screen.
The following example defines three sizes, one for mobile, tablet and desktop - devices with a viewport width of up to 480px will get the 480px wide image and so on.
srcset="{{ item.src|resize(480) }} 480w, {{ item.src|resize(1280) }}
1280w, {{ item.src|resize(1920) }} 1920w"If you’re new to srcset or want to delve into it a bit deeper, CSS Tricks’ article is a good read.