gulp-lazyimagecss

    2.0.8 • Public • Published

    gulp-lazyimagecss NPM Version

    Build Status Win Build status dependencies NPM Downloads

    Join the chat at https://gitter.im/weixin/gulp-lazyimagecss TmT Name License

    Be lazy, add images's CSS automatically, like width & height and more.
    Save time, make money.

    NPM Home Page: https://www.npmjs.com/package/gulp-lazyimagecss

    中文(zh_CN) 说明文档 →

    Install

    Install with NPM:

    npm install gulp-lazyimagecss --save

    Usage

    gulpfile.js

    var lazyimagecss = require('gulp-lazyimagecss');
     
    gulp.src(paths.src.less)
        .pipe(less())
        .pipe(lazyimagecss())
        .pipe(gulp.dest(paths.src.css));
            

    Options
    Set CSS which you wish to be added automatically.

    options = lodash.extend({
        width: true, // Output width in CSS
        height: true, // Output height in CSS
        backgroundSize: true, // Output background-size in CSS
        imagePath: [] // Set image path to be worked (e.g. `['../slice','../img']`)
    }, options);

    Result

    CSS In

    .bg-test {
        background: url(../img/bg.png);
        background-repeat: no-repeat;
    }
    .icon-test {
        background-image: url(../slice/test.png);
    }
    .icon-test-retina {
        background-image: url(../slice/test@2x.png);
    }

    CSS Out

    .bg-test {
        background: url(../img/bg.png);
        background-repeat: no-repeat;
        width: 1100px;
        height: 300px;
    }
    .icon-test {
        background-image: url(../slice/test.png); // test.png - 32x32
        width: 32px;
        height: 32px;
    }
    .icon-test-retina {
        background-image: url(../slice/test@2x.png); // test@2x.png - 64x64
        width: 32px;
        height: 32px;
        background-size: 32px;
    }

    Tips: Use PostCSS with CSS Out if needed.

    Notes

    • CSS property generating will be ignored if any of those width / height / background-size already set.
    • Both background-image: url() and background: url() can be detected successfully.
    • Get image size from HEX data from file buffer via fast-image-size, more fast now.
    • Detect PNG & JPG based on file signatures.
    • No minimum image buffer size limited now /fast-image-size/pull/5.

    Contributing

    This repo is build and maintained by TmT Team.
    If you get any bugs or feature requests, please open a new Issue or send us Pull Request, Thank you for your contributions.

    Install

    npm i gulp-lazyimagecss

    DownloadsWeekly Downloads

    6

    Version

    2.0.8

    License

    MIT

    Last publish

    Collaborators

    • doubleluo
    • hzlzh
    • littledu