Split CSS into a base file with layout and a separate file with all images (for lazy loading)
This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-split-images --save-dev
The "split_images" task
In your project's Gruntfile, add a section named
split_images to the data object passed into
Default value: ''
File in which to put the image declarations. A string value which needs a path and filename (eg. in dist/styles.images.css).
In this example, the default options are used to get two files which are generated to the specific folder. So if the
dev/styles.css file has the content
the generated result would be that there are now two files. One which has the standard styles, the second with your image:
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.