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