1 在 watch 处理图片的时候, 遇到了, 一个问题
就是源文件图片删除, 可以监测到, 但是新增图片监测不到,
最后处理的发现问题在于 watch 里面的 src 问题,
写成'./src/images/.'的时候监测不到, 写成'src/images/.'的时候 可以监测到
2 生成雪碧图的时候, 用的 gulp-CSS-spriter, 但是 spriter 在处理的时候, 所有 background 里面的图片
全部都合成了一张图片, 但是这并不是我想要的效果
我希望的是一些小图标合并, 但是大的背景图不合并, 查找资料 找到了解决方案
技巧 :
gulp-css-spriter 默认会对样式文件里, 所有的 background/background-image 的图片合并,
但实际项目中, 我们不是所有的图片都需要合并
- background-image: url(../slice/p1-3.png?spriter);// 有? spriter 后缀的合并
- background-image: url(../slice/p-cao1.png); // 不合并
修改下面文件可以按需合并
node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js
48 行开始的 if-else if 代码块中, 替换为下面代码:
javascript 代码
- if(transformedDeclaration.property === 'background-image' && /\?__spriter/i.test(transformedDeclaration.value)) {
- transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
- return cb(transformedDeclaration, declarationIndex, declarations);
- }
- // Background is a shorthand property so make sure `url()` is in there 且判断 url 是否有?__spriter 后缀
- else if(transformedDeclaration.property === 'background' && /\?__spriter/i.test(transformedDeclaration.value)) {
- transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
- var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);
- if(hasImageValue) {
- return cb(transformedDeclaration, declarationIndex, declarations);
- }
- }
图片目录, 我把需要合并的 icons 放在一个单独的 icons 里面, 图片压缩只压缩 src/images/* 的图片
代码地址
使用方法:
1npm install --save-dev
2 修改 gulp-css-spriter (上文)
- gulp vender(放的一些组件的 css\js)
- gulp
5 在打开的网页后面追加 / html/demo.html(因为没有修改 browserSync 的 baseDir, 如果修改了, 引用样式和 js 目录就需要修改, 所以为了结构没有修改这边!)
来源: http://www.qdfuns.com/article/42435/2480dd15c2c5220fb23886f5acca312c.html