grunt-css-image
Plugin to generate css file wto bind all images from folder
Getting Started
This plugin requires Grunt~0.4.2If 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-css-image --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-css-image');The "cssimage" task
Overview
In your project's Gruntfile, add a section namedcss_image to the data object passed into grunt.initConfig().grunt.initConfig({
css_image: {
dist:{
files:[{
cwd:"app/images/"
src: "**/*.{png,jpg,gif,jpeg}"
dest: "app/styles/_img.css"
}]
options:{
prefix:"img_",
images_path:"../images"
}
}
},
});Options
options.prefix
Type:String
Default value: 'img_'Css prefix. For example: .imgsampleimage for sampleimage.png
options.imagespath
Type:String
Default value: '../images'Path to image source.
Usage Examples
Default Options
In this example task search all images from "app/images/" according mask "/.{png,jpg,gif,jpeg}" and write css file in "app/styles/img.css" with css prefix "img" and path to image folder "../images"grunt.initConfig({
css_image: {
dist:{
files:[{
cwd:"app/images/"
src: "**/*.{png,jpg,gif,jpeg}"
dest: "app/styles/img.css"
}]
options:{
prefix:"img_",
images_path:"../images"
}
}
},
});Sample resulting css
/* This file is generated */
.img_credits_footer{
background: transparent url("../images/base/credits_footer.png") 0 0 no-repeat ;
width: 376px;
height: 94px;
text-indent: -5000px;
display: block;
z-index: 0;
}