如何用gulp实现css引用的图片/字体资源打版本号?
我的目录结构
├─dist
└─src
├─css
│ a.css
│
└─images
a.png
src/a.css里面利用 background-image:url(./../images/a.png)
引用了图片
现在想实现这样的效果
├─dist
│ ├─css
│ │ a-bbbb.css
│ │
│ └─images
│ a-cccc.png
│
└─src
├─css
│ a.css
│
└─images
a.png
也就是我对css打版本号的同时,
读取里面依赖的的图片,
根据相对路径拷贝图片文件
把图片也打版本号
把css里面相关代码
background-image:url(./../images/a.png)
改成background-image:url(./../images/a-cccc.png)
这个功能用webpack很好做。用几个loader组合即可
用gulp一时感觉无人下手。
试过 gulp-rev
gulp-rev-css-url
不知道是我不会组合还是怎么样,达不到以上效果。
试了一下 https://coding.net/u/givebest/p/gulp-automatic-add-version/git 里面的源代码,基本上能满足我原来提问的需求
不过还差一点,如果我把目录改成
├─dist
└─src
├─css
│ a.css
│
└─images
│ a.png
│
└─other
b.png
然后两张图片都引用进来,打版本号之后,我期望是这样子的
├─css
│ a-yyy.css
│
└─images
│ a-xsd.png
│
└─other
b-xxx.png
实际是这样子的
├─css
│ a-yyy.css
│
└─images
│ a-xsd.png
│ b-xxx.png
└─other
基本上就是代码的这里决定图片路径,而不是真的读懂了css url的语法
return gulp.src(imgSrc)
.pipe(rev())
.pipe(gulp.dest(imgDest))
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
看这里 Gulp自动添加版本号