gulp-css-image-dimensions

    1.1.5 • Public • Published

    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

    Install

    npm i gulp-css-image-dimensions

    DownloadsWeekly Downloads

    224

    Version

    1.1.5

    License

    MIT

    Last publish

    Collaborators

    • kaesetoast