webpack - 如何用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打版本号的同时，

1. 读取里面依赖的的图片，

2. 根据相对路径拷贝图片文件

3. 把图片也打版本号

4. 把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))

解决方案

看这里 Gulp自动添加版本号

这篇关于webpack - 如何用gulp实现css引用的图片/字体资源打版本号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！