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 =＆gt; ../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

你可能想看看这个咕噜包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 2

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

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

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

感谢提示和回答人们！

Answer 3

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

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

在dist中成为这个：

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

希望这有帮助。

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

3 个答案: