weixin / Gulp Lazyimagecss
Licence: mit
自动生成图片CSS属性,如:width & height 等
Stars: ✭ 33
Programming Languages
javascript
184084 projects - #8 most used programming language
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
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/[email protected]);
}
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/[email protected]); // [email protected] - 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()
andbackground: 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].