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

Question

我正在尝试将前端依赖项移出版本控制系统。 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。我会将这个捆绑的文件保存在 assets/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']);
};

要么：

• 我是否错误地配置了 Grunt 或做错了什么？

• 或者我所描述的工作流程根本不是正确的，我应该改用另一个工作流程。

谢谢！

Answer 1

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

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

在 dist 中变成这个：

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

希望这会有所帮助。

Answer 2

你可能想看看这个 grunt 包https://github.com/Ideame/grunt-css-urls。 该软件包似乎旨在解决您的问题。

编辑：看了这个插件后，我不喜欢重写我的标记以使我的构建过程更顺畅的想法。所以我最终编写了自己的小函数来为我重写。

我使用 grunt 的 concat 插件来捆绑我的 css 文件。这个插件的好处是它支持连接前的文件处理功能。现在我的 gruntfile 看起来像这样：

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;
    }
    },
}

Answer 3

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

您可以在 GitHub 跟踪器上找到问题：https://github.com/GoalSmashers/clean-css/issues/129

这个库可以使用绝对重写（从根目录）或根据新的输出目录更改相对图像路径。查找 --root 或 --ouput 指令。

感谢大家的提示和解答！