Updates to Origin
Back in April I published my front-end starting point on GitHub. It includes basic HTML & CSS and many Grunt tasks to automate compilation, minification, optimisation, and rasterisation.
What’s new
My custom SVG rasterisation task was poorly written. It brought my laptop to a standstill while churning through as many phantom.js processes as there were SVG files. I’ve now improved that, mostly with a sexy progress bar:
There’s probably a faster way using a single phantom.js instance but by the time I figure that out I won’t need PNG fallbacks for legacy browsers… Update: I’ve now published grunt-svg2png to NPM and improved the speed performance dramatically! Instead of 30 seconds it’s done in less than 5.
Because I’m generating some raster graphics on the fly I’ve had to manually optimise them using the ImageOptim desktop app. Now thanks to Jamie Mason’s awesome Grunt-ImageOptim and ImageOptim-CLI that’s no longer the case! My automated build process now goes:
- Create build folder
- Compile HTML templates
- Compile CSS (Sass with Compass)
- Copy assets (images, fonts, JavaScript)
- Minify JavaScript
- Optimise and rasterise SVG
- Optimise raster images
The whole process takes less than a minute and I have a production ready flat build. I could do more with JavaScript (concatenation and testing) but my usual work hasn’t mandated much attention here. I should probably normal(-ise/-ize) spelling at some point.