
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
edp-build-sprite
Advanced tools
EDP Build plugin for CSS auto sprite
edp-build-sprite 是 edp-build 的一个插件,支持自动根据要合并的图片生成雪碧图,支持 retina 图片处理。
npm install edp-build-sprite
在样式文件里指定要合并的图片
/* index/main.css */
#box0 .bookmark-normal {
/* 可以指定 target,相同的 target 合并到同一 target 文件,未指定按 `groupByCSSFile` 配置来合并 */
background: url(./img/bookmark.png?_sprite=bookmark) no-repeat;
}
#box1 .error {
background: url(../common/img/icon_tip-error.png?_sprite) no-repeat;
}
在 edp 构建配置文件里增加处理器配置
在 edp-build-config.js
处理器添加该处理器,处理位置,放在 css 压缩处理器之前:
var lessProcessor = new LessCompiler({});
var cssProcessor = new CssCompressor();
var moduleProcessor = new ModuleCompiler();
var jsProcessor = new JsCompressor();
var AutoSprite = require('edp-build-sprite');
var cssSpriter = new AutoSprite({
files: ['src/index/main.css'],
// 按样式文件引用的图片进行分组 sprite,如果要全局合成一个 sprite 文件,这里设为 false
// 默认 为 true
groupByCSSFile: true,
// 对给定图片进行缩放的比例,只对不带@xx的图片处理,因此对于不带@xx命名的文件不要
// 混杂着各种像素密度的图片,对于 pc 可以忽略该选项,移动端如果都是统一使用 2 倍像素的图片,
// 可以将值设为 0.5
scale: 0.5,
// 修复 ie6 png 问题,默认 false,修复方式,见下面 options 说明
fixIE6PNG: true
});
var pathMapperProcessor = new PathMapper();
var addCopyright = new AddCopyright();
return {
'default': [
moduleProcessor, lessProcessor,
cssSpriter, pathMapperProcessor
],
'release': [
lessProcessor, cssSpriter, cssProcessor, moduleProcessor,
jsProcessor, pathMapperProcessor, addCopyright
]
};
files: Array
要处理的样式文件,默认所有 *.css
文件
spriteOpts: Object
合并雪碧图的选项
number
图片间距,默认 2
spriteParamName: string
标识要合并为 sprite 的图片的 url 查询参数名称,默认 _sprite
。如果指定了参数值,则合并的图片会合并到该参数值命名的文件,文件存储在 outputDir
scale: number
对给定图片进行缩放的比例,默认值 1
,只对不带 @xx 的图片处理
outputDir: string
输出的 sprite 文件存储的目标目录,用于指定合并文件名及 groupByCSSFile
值为 false
情况下存放的目录。默认 src/sprite
,由于 edp build 时候会替换 src
为 asset
,因此最终输出位置为 output/asset/sprite
目录
groupByCSSFile: boolean
是否按样式文件输出 sprite
文件,即一个样式文件对应一个 sprite
文件,还是所有样式文件引用的 sprite
合成一个文件,默认 true
spriteParamName
指定了参数值,则相同参数值会合并在相同 target 值的文件: <outputDir>/<target>.png
文件;true
情况,合并文件放置在样式文件旁边,文件名同样式名: <cssFile>.png
;false
情况,合并文件为: <outputDir>/all.png
;@2x
形式图片会根据其倍率分开处理,分别输出到不同倍率的文件下: <target>@2x.png
或 all@2x.png
或 <cssFile>@2x.png
。fixIE6PNG: boolean
是否修复 ie6 png 问题, 基于 JS 方式,默认 false
${xx}
指定要修复的样式文件,可以指定多个文件,以 逗号
分隔
<!--[if IE 6]>
<script src="dep/DD_belatedPNG/DD_belatedPNG_0.0.8a.js"></script>
<script>
// DD_belatedPNG.fix("${src/index/main.css}");
</script>
<![endif]-->
处理完结果如下:
<!--[if IE 6]>
<script src="dep/DD_belatedPNG/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix("#box4 .retina-2x .btn-off,#box4 .retina-2x .btn-on,#box1 .warn,#box1 .error,#box0 .common2,#box0 .common1,#box0 .to,#box0 .root,#box0 .organize,#box0 .import,#box0 .normal");
</script>
<![endif]-->
ie6Fixer: Function
修复 ie6 png 问题处理器,默认基于 // DD_belatedPNG.fix("${xx}");
正则替换,该方法传入两个参数:file
(要处理的文件), toFixSelectorMap
(要修复的样式选择器),返回替换完文件内容
FAQs
Auto css sprite processor for edp build
The npm package edp-build-sprite receives a total of 6 weekly downloads. As such, edp-build-sprite popularity was classified as not popular.
We found that edp-build-sprite demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.