This is the 10th part of my series Introduction to Gulp.js. Today I will use Gulp.js to create CSS image sprites.
- Intro and Setup
- Server with BrowserSync and Configuration
- Build, Clean and Jekyll
- Creating CSS with Sass (and Compass)
- Images and Vector Fonts
- Base64 Encoded Images
- Watch for Changes
- Generating CSS Image Sprites
- Production Build, Server and Jekyll
- Deploying the Website with Rsync
- Performance Improvements with WebP and Gzip
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 firstname.lastname@example.org
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
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.
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.