words

Grunt task example for assetGraph-sprite

grunt.registerTask('dopamineSprite', 'Collects sprite images with assetgraph', function() {
	//https://sourcegraph.com/github.com/One-com/assetgraph/tree
	var done = this.async();
	var AssetGraph = require('assetgraph');
	new AssetGraph({
		root: 'build/app'
	})
		.loadAssets('css/*.css')
		.populate({followRelations: {type: 'CssImage'}})
		.queue(require('assetgraph-sprite')())
		
		.writeAssetsToDisc({type: 'Css'}, "file://temp/app/")
		.writeAssetsToDisc({type: 'Png'}, "file://temp/app/")
		.run(function (err) {
			if (err){
				grunt.log.error('Oops :( ', err);
			}else{
				grunt.log.writeln('Building sprites done. Lovely <3');
			}
			
			done();
		});
});

I wrote this note because the documentation on github is not very self-explanatory. It took me a while to figure out the correct path setup for each parameter. The example above worked fine for me where all my css assets were at build/app and my target directory was temp/app. Note the backslashes at the end of paths.

This is just an example on how to implement a grunt task around assetGraph-sprite. The important thing is to wrap the task in an async way and call done() only in the callback function.

See more: github:assetgraph-sprite

Last updated: