• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

weixin/gulp-lazyimagecss: 自动生成图片CSS属性,如:width & height 等 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

weixin/gulp-lazyimagecss

开源软件地址(OpenSource Url):

https://github.com/weixin/gulp-lazyimagecss

开源编程语言(OpenSource Language):

JavaScript 78.1%

开源软件介绍(OpenSource Introduction):

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.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap