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. Copy assets (images, fonts, JavaScript).Now thanks to Jamie Mason’s awesome Grunt-ImageOptim and ImageOptim-CLI that’s no longer the case! My automated build process now goes:
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.īecause I’m generating some raster graphics on the fly I’ve had to manually optimise them using the ImageOptim desktop app. I’ve now improved that, mostly with a sexy progress bar: It brought my laptop to a standstill while churning through as many phantom.js processes as there were SVG files. However, these do not solve the problem of displaying large-size images on small-screen devices.
#Imageoptim grunt for mac
My custom SVG rasterisation task was poorly written. Image optimisation software such as ImageOptim for Mac and build tool tasks such as grunt-contrib-image-min for Grunt and gulp-imagemin for Gulp allow a reduction in image file size. Here we display the file sizes and quality loss of a collection of images after they have been compressed by each respective tool. Legend: Best optimisation Size increased Highest quality loss. It includes basic HTML & CSS and many Grunt tasks to automate compilation, minification, optimisation, and rasterisation. See the installation guide, examples and grunt-imageoptim. Back in April I published my front-end starting point on GitHub. Make a shell script to install Grunt and your dependencies so someone can easily pull down your branch, run the shell script and be ready to contribute: grunt-deps.sh: npm install grunt save-dev npm install -g grunt-cli Above is nice because even if the user already has these installed, it won’t do anything unnecessary.
0 kommentar(er)
