Gulp-css-image NPM

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;