如何自动更新相对 CSS 路径以进行缩小？答案

【问题标题】：How to automatically update relative CSS paths for minification?如何自动更新相对 CSS 路径以进行缩小？
【发布时间】：2016-09-22 13:58:15
【问题描述】：

我想更新所有相对路径以进行缩小，因为我为每个 JS/CSS 组件使用单独的文件夹，并且每个组件的文件夹深度也可以不同，例如：

css/
    style.min.css // final minified and processed file
    common.scss
    components/
        gallery/
            gallery.scss // url(../../../img/mypic.png)
img/
    mypic.png

缩小后，我在style.min.css 中的样式仍然是../../../img/mypic.png。不过必须更新为../img/mypic.png，否则浏览器将找不到图片。

如何使用PostCSS 或其他包自动执行此操作？

我找到了postcss-url 项目，它提供了自定义 URL 转换的功能，但我没有找到任何示例。

现在我使用gulp、nodejs、autoprefixer 和postcss 进行缩小。

【问题讨论】：

如果您希望我们帮助您进行构建，实际提供构建代码会很有帮助。阅读How to Ask 和minimal reproducible example。

标签： css node.js gulp minify postcss

【解决方案1】：

postcss-url中有一个名为url的参数，可用于将自定义函数传递给postcss-url。此函数将能够修改postcss-url 的 URL，但必须手动编写代码。这是我在项目中使用的：

var outDir = './src/css'; // output folder for CSS
gulp.task('min:css', function () {
    return gulp
        .src(cssInput)
        .pipe(postcss([
            autoprefixer(),
            postcssurl({
                // this function will modify URLs
                url: function (asset) {
                    if (!asset.url || asset.url.indexOf("base64") !== -1) {
                        return asset.url;
                    }
                    return path.relative(outDir, asset.absolutePath).split("\\").join("/");
                }
            })
        ]))
        ...
});

【讨论】：