gulp-css-image

gulp-css-image

==============

Gulp task for generate css/scss classes from the existing images

Usage

Default Usage (generate css)

var cssimage = require("gulp-css-image");
gulp.task("cssimage", function(){
  return gulp.src("images/**/**")
    .pipe(cssimage())
    .pipe(gulp.dest("./image.css"))
});

> ls -l ./images
1.jpg

image.css

/* This file is generated */
.img_1{
  width: 400px;
  height: 300px;
  background-image: url(1.jpg);
  background-size: 400px 300px;
}

Generate scss

If you want generate scss use scss options

var cssimage = require("gulp-css-image");
gulp.task("cssimage", function(){
  return gulp.src("images/**/**")
    .pipe(cssimage({
      css: false,
      scss: true,
      name: "image.css"
    }))
    .pipe(gulp.dest("."))
});

/* This file is generated */
@mixin img_1(){
  width: 400px;
  height: 300px;
  background-image: url(1.jpg);
  background-size: 400px 300px;
}
img_1__width: 400px;
img_1__height: 300px;

Options

gulp-css-image is gulp plugin and use css-image module functionality. Full description of option's configuration read css-image

###Default options

• css: true
• scss: false
• retina: false,
• squeeze: 1
• root: ""
• separator: "_"
• prefix: "img_"
• name: "_img.css"

Changelog:

0.0.3 - bug fix (add lodash to deps)
0.0.2 - add name option of generated file
0.0.1 - release