自动生成图片CSS属性,如:width & height 等
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.npmignore
.travis.yml
LICENSE
README-zh_CN.md
README.md
appveyor.yml
index.js
package.json

README.md

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.