lexich / gulp-css-image

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

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

gulp-css-image's Issues

BUG: Remove dependency on gulp-util

Re: SC5/sc5-styleguide#1127
https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

Please remove/replace the dependency on this package as it has been deprecated. Thank you!

White space issues

There is an issue that arises when you have images with: with space riddled names.
Now me I am a lazy person and do not wish to go and rename all those files, so instead I used the edit module to stream in the finished content, and fix it my self. here is the code.

Before (Note white spaces in mixin and variables.)

/* This file is generated */
@mixin img_Viridian City() {
  width: 900px;
  height: 1001px;
  background-image: url(Viridian City.gif);
  background-size: 900px 1001px;
}
$img_Viridian City__width: 900px;
$img_Viridian City__height: 1001px;
$img_Viridian City__path: 'Viridian City.gif';

Pipe edit

            .pipe(edit(function(content, cb){
                var err = null;
                var rootDir = 'img/';

                var messedUp = content.match(/\@mixin\s(.*)\(/g);

                // Mixin fixes
                messedUp.forEach(function(text){
                    var toFix = text.match(/\@mixin\s(.*)\(/);

                    var mixin = toFix[0];
                    var id = toFix[1];

                    var idFix = id.replace(/\s+/g, '_');

                    var mixinFix = mixin.replace(id, idFix);

                    var cleanUp = mixinFix.replace(/\_{2,}/, '_');
                    content = content.replace(mixin, cleanUp);

                });

                // Varaible fixes
                messedUp = content.match(/\$(.*):/g);

                messedUp.forEach(function(text){
                    var varb = text.match(/\$(.*):/)[0];
                    var varbFix = varb.replace(/\s/g, '_');

                    var cleanUp = varbFix.replace(/\_{2,}/, '_');
                    content = content.replace(varb, cleanUp);
                });

                // Finally url wraps #easy part
                messedUp = content.match(/url\((.*)\)/g);

                messedUp.forEach(function(text){
                    var toFix = text.match(/url\((.*)\)/);
                    var url = toFix[0];
                    var link = toFix[1];

                    // One other thing to note, this link will be wrong so we have to specify root location
                    var fixLink = "'" +link+ "'";
                    var dirLink = "'" + rootDir + link + "'";

                    var fix = url.replace(link, dirLink);

                    notDone = content.replace(url, fix);

                    // Remember fixLink = 'link', so we replace it with 'dir/link'
                    content = notDone.replace(fixLink, dirLink);
                });

               cb(err, content);
            }))

After

/* This file is generated */
@mixin img_Viridian_City() {
  width: 900px;
  height: 1001px;
  background-image: url('img/Viridian City.gif');
  background-size: 900px 1001px;
}
$img_Viridian_City_width: 900px;
$img_Viridian_City_height: 1001px;
$img_Viridian_City_path: 'img/Viridian City.gif';

Here is my full task.

gulp.task("cssimage", function(){
  return gulp.src("public/img/map/**")
            .pipe(cssimage({
                css: false,
                scss: true,
                separator: "_"
            })) 
            .pipe(concat('_images.scss'))
            .pipe(edit(function(content, cb){
                var err = null;
                var rootDir = 'img/';

                var messedUp = content.match(/\@mixin\s(.*)\(/g);

                // Mixin fixes
                messedUp.forEach(function(text){
                    var toFix = text.match(/\@mixin\s(.*)\(/);

                    var mixin = toFix[0];
                    var id = toFix[1];

                    var idFix = id.replace(/\s+/g, '_');

                    var mixinFix = mixin.replace(id, idFix);

                    var cleanUp = mixinFix.replace(/\_{2,}/, '_');
                    content = content.replace(mixin, cleanUp);

                });

                // Varaible fixes
                messedUp = content.match(/\$(.*):/g);

                messedUp.forEach(function(text){
                    var varb = text.match(/\$(.*):/)[0];
                    var varbFix = varb.replace(/\s/g, '_');

                    var cleanUp = varbFix.replace(/\_{2,}/, '_');
                    content = content.replace(varb, cleanUp);
                });

                // Finally url wraps #easy part
                messedUp = content.match(/url\((.*)\)/g);

                messedUp.forEach(function(text){
                    var toFix = text.match(/url\((.*)\)/);
                    var url = toFix[0];
                    var link = toFix[1];

                    // One other thing to note, this link will be wrong so we have to specify root location
                    var fixLink = "'" +link+ "'";
                    var dirLink = "'" + rootDir + link + "'";

                    var fix = url.replace(link, dirLink);

                    notDone = content.replace(url, fix);

                    // Remember fixLink = 'link', so we replace it with 'dir/link'
                    content = notDone.replace(fixLink, dirLink);
                });

               cb(err, content);
            }))
            .pipe(prefix("last 3 version", "> 1%", "ie 8", "ie 7"))
            .pipe(gulp.dest("dev/src/styles/helpers"))
            .pipe(livereload());
});

Add lodash to dependencies in package.json