Fabienne Wassermann, double gulp

Introduction to Gulp.js 10: Generating CSS Image Sprites

This is the 10th part of my series Introduction to Gulp.js. Today I will use Gulp.js to create CSS image sprites.

Just to be sure everybody knows what I’m talking about: A CSS image sprite is a collection of images put into a single image. This way fewer requests are needed and the website will load faster. The CSS file will move the image for each sprite to the correct position.

CSS images sprites are not used that often any more, because of SVG or vector fonts. But I still use them as a fallback for browsers incapable of displaying vector fonts.

I will need a Spritesmith plugin for Gulp.js:

$ npm install —-save-dev gulp.spritesmith@4.1.1
gulp/config.js

I split my config into three subsections: The source files (individual icons for the sprite), the destination for the sprite and the css partial and the options for the image sprite. I use a custom cssClass which will generate :hover states by naming the hover sprites with -hover.

gulp/tasks/development/sprites.js

In the end I get two files: a partial _sprites.scss containing the class attributes and a sprite icon-sprite.png containing all images.

All development tasks are done now. We have got a running development server, tasks to create the Jekyll site and all assets and tasks for linting, sprite and vector font creation.

Next I will write the tasks needed to get production ready code.

Source Code

View Source on GitHub

Conclusion

This concludes the 10th part of my series Introduction to Gulp.js. Today we learned how to create CSS image sprites with Gulp.js and Spritesmith.


This article was first published on stefanimhoff.de
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.