grunt-split-images
v0.1.4
Published
Split CSS into a base file with layout and a separate file with all images (for lazy loading)
Downloads
2
Maintainers
Readme
grunt-split-images
Split CSS into a base file with layout and a separate file with all images (for lazy loading)
Getting Started
This plugin requires Grunt ~0.4.5
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
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-split-images');
The "split_images" task
Overview
In your project's Gruntfile, add a section named split_images
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
split_images: {
options: {
output: 'dist/styles.images.css'
},
files: {
'dist/styles.css': ['dev/styles.css']
},
},
});
Options
options.output
Type: String
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).
Usage Examples
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
a.top {
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fx.....");
}
the generated result would be that there are now two files. One which has the standard styles, the second with your image:
styles.css
a.top {
background-repeat: no-repeat;
}
styles.images.css
a.top {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20v.......");
}
Contributing
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.
Release History
(Nothing yet)