gulp-lazyimagecss

gulp-lazyimagecss

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/[e-mail]);
}

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/[e-mail]); // [e-mail] - 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.