README-zh_CN.md

gulp-lazyimagecss

高效地书写 CSS 必备，自动生成图片CSS属性，如：width & height 等。
省时省力，懒人必备！

NPM 官方主页: https://www.npmjs.com/package/gulp-lazyimagecss

安装

通过 NPM 安装*（也可使用 CNPM 等源）*

npm install gulp-lazyimagecss --save

使用

配置 gulpfile.js

var lazyimagecss = require('gulp-lazyimagecss');

gulp.src(paths.src.less)
    .pipe(less())
    .pipe(lazyimagecss())
    .pipe(gulp.dest(paths.src.css));
        	

配置选项
设置希望被自动生成的 CSS 属性
设置生效的图片目录

options = lodash.extend({
    width: true, // 生成 CSS: width
    height: true, // 生成 CSS: height
    backgroundSize: true, // 生成 CSS: background-size
    imagePath: [] // 设置图片生效目录（数组格式，如：`['../slice','../img']`）
}, options);

效果

CSS 输入

.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 输出

.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); // [email protected] 原图片尺寸为 64x64
	width: 32px;
    height: 32px;
    background-size: 32px;
}

提示: 输出 CSS 可配合使用 PostCSS 进一步处理

说明

• 如果 width / height / background-size 等属性已存在，则不会覆盖对应的原始属性值。
• 使用 background-image: url() 或 background: url() 均可被正确识别。
• 通过读取图片 HEX 数据取得图片 宽/高 信息，大大提升相应速度，参看：fast-image-size。
• 通过 file signatures 判断检测图片类别，如：PNG & JPG。
• 去掉图片最小 buffer size 的限制，参看：/fast-image-size/pull/5。

参与贡献

此项目由 TmT 团队 创建和维护。
如果你有 Bug反馈 或 功能建议，请创建 Issue 或发送 Pull Request 给我们，感谢你的参与和贡献。