relative-path - 如何使用 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

你可能想看看这个 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;
    }
    },
}