Relative path 如何使用Grunt重写供应商CSS文件中图像的URL

我正在尝试将前端依赖项移出版本控制系统。Bower.io和Grunt的组合应该能够做到这一点

然而，出现了一个我还无法通过捆绑多个供应商库来解决的问题。例如，假设我有以下目录结构，其中components目录是Bower.io保存依赖项的目录：

├── assets
└── components
    ├── bootstrap
    │   ├── img
    │   │   └── glyhs.gif
    │   └── less
    │       └── bootstrap.css
    └── jquery-ui
        ├── css
        │   └── style.css
        └── images
            ├── next.gif
            └── prev.gif

现在假设我想绑定jQuery的style.css和Bootstrap'Bootstrap.css。我将把这个捆绑文件保存在资产/bundled.css中

但是，在此文件中，对原始图像（../images/next.gif和../img/glyhs.gif）的引用不正确。它们必须重写才能工作（因此../images/next.gif=>../components/jquery ui/images/next.gif）。我相信（d）这种URL重写是Grunt应该能够做到的但我似乎无法使用cssmin/less/copy任务实现这一点。例如，以下Grunt设置（仅移动1个文件）无法工作：

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        less: {
            options: {
                compile: false,
                relativeUrls: true
            },
            bootstrap: {
                src: 'components/bootstrap/less/bootstrap.less',
                dest: 'assets/bootstrap.css'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.registerTask('dist-css', ['less']);
};

要么：

• 我对咕噜声的理解有误还是做错了什么

• 或者我所描述的工作流程不是正确的，我应该使用另一个来代替

---

谢谢

您需要对dist css文件进行一些搜索/替换，以生成正确的相对路径。我个人更喜欢有很多grunt插件可以帮你做到这一点。使用变量设置非压缩资产，然后使用动态生成的URL生成dist css。。因此：

body {
    background:url(@@IMG_PATH/background.jpg);
}

在dist中变为：

body {
    background:url(path/to/background.jpg);
}

---

希望这能有所帮助。

您可能需要看看这个咕噜包。 这个软件包似乎就是为了解决你的问题

编辑：看过这个插件后，我不喜欢为了使构建过程更平滑而重写标记的想法。因此，我最终编写了自己的小函数，为我进行重写

我使用grunt的插件捆绑我的css文件。这个插件的优点在于它支持在连接之前的文件处理功能。现在，我的Grunfile如下所示：

grunt.initConfig({
concat: {
    options: {
    separator: '\n',
    process: function (src, filepath) {
        var cssPatt = new RegExp('app(\/.*\/).*\.css$');

        //filter out everithing except css files
        var file = cssPatt.exec(filepath);

        if (file) {
            var urlPatt = /url\(\'(.*)\'\)/g;

        console.log('In file: ' + filepath);

        //replace every url(...) with its absolute path
        return src.replace(urlPatt, function (match, p1) {
            console.log(' * ' + match + ' -> ' + 'url(\'' + file[1] + p1 + '\')');
            return 'url(\'' + file[1] + p1 + '\')';
        });
        }

        return src;
    }
    },
}

---

仅供参考：现在有一个现成的解决方案。我在CleanCss grunt插件上发布了同样的问题，他们已经接受了这个问题，并在新的1.1版本中发布了这个行为

您可以在GitHub跟踪器上找到问题：

该库使使用绝对重写（从根目录）或基于新的输出目录更改相对映像路径成为可能。查找

--root

或

--output

指令

---

谢谢大家提供的提示和答案

对于我们自己构建的样式表，这确实是一个解决方案。但是，对于供应商库（如示例中提到的Bootstrap和jQuery UI），如果不更改这些文件的内容，这是无法做到的。我认为修改Bootstrap副本（动态地作为dist文件夹中的副本，或者只是继续在原始文件中进行搜索和替换）没有任何错误，毕竟，它只是一个帮助你建立网站的工具。另一种方法可能是复制原始目录结构以保留图像，但保留未压缩版本，或者在生产站点上载组件目录时将其符号链接。我认为手动更新供应商库不是一种好做法。除其他外，这使得更新更加困难。当然，如果操作是以系统化的方式自动完成的，那么就可以了。除了相对路径之外，还有一个选项是自动将所有图像路径重写为绝对路径。也许这可以通过Grunt实现？是的，使用搜索和替换插件之一：，或者你只能在应用程序处于生产模式时测试它，对吗？没有开发人员模式，您可以在Hanks中测试它，以获取您的评论。然而，我的问题现在以一种更优雅的方式解决了。我应该更新我的问题：对不起！我更新了我的答案。我希望你同意这种方法更干净。再次感谢！谢谢你的回答！帮助我自己找到了解决办法。但是，您的答案不会在一行中检查多个url（）定义，就像Bootstrap 3在字体定义中所做的那样：

src:url（'../fonts/Glyphions halflings regular.eot？#iefix'）格式（'embedded-opentype'）、url（'../fonts/glyphicons halflings regular.woff'）'）格式（'woff'）、url（'../fonts/glyphicons halflings regular.ttf'）格式）（'truetype'），url（'../fonts/glyphicons-halflings-regular.svg#glyphicons-halflings-regular'）格式（'svg'））

是否可以共享您的配置文件？我的情况几乎相同，但在使用cssmin配置usemin时遇到困难。请提供一个Grunt配置，精确显示您所做的操作，我们无法通过查看您提供的链接来确定。试试这个……它对我有帮助！