gulp-css-image-dimensions

css-image-dimensions plugin for gulp

This plugin is meant as a drop-in replacement for the image-width and image-height functions from Compass.

Usage

First, install gulp-css-image-dimensions as a development dependency:

npm install --save-dev gulp-css-image-dimensions

Then, add it to your gulpfile.js:

Note for usage in conjunction with CSS-Preprocessors If you are using this plugin in conjunction with a preprocessore like Sass, you should make sure to call this plugin after it.

var cssImageDimensions = require("gulp-css-image-dimensions");
 
gulp.src("css/**/*.css")
    .pipe(cssImageDimensions('../images')
    .pipe(gulp.dest("./dist"));

In your CSS, you can now write the following:

.some-class {
    width: image-width('imagename.png');
    height: image-height('imagename.png');
}

assuming imagename.png is e.g. 25x30px, gulp-css-image-dimensions will turn this into

.some-class {
    width: 25px;
    height: 30px;
}

API

css-image-dimensions(imagesPath)

imagesPath [optional]

Type: String
Default: .

The path to your images directory. This can be either absolute, or relative to your css files.

License

MIT License