grunt-css-image

Plugin to generate css file wto bind all images from folder

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
grunt-css-image
410.4.18 years ago11 years agoMinified + gzip package size for grunt-css-image in KB

Readme

grunt-css-image
Plugin to generate css file wto bind all images from folder

Getting Started

This plugin requires Grunt ~0.4.2
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-css-image --save-dev

Once 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 named css_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;
}

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)