29

我正在尝试将前端依赖项移出版本控制系统。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 tasks 让它工作。例如，以下 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 或做错了什么？

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

谢谢！

4

3 回答 3

6

你可能想看看这个 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;
    }
    },
}
于 2013-09-10T08:01:36.027 回答
5

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

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

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

感谢人们的提示和回答！

于 2013-09-11T09:34:13.800 回答
-2

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

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

在 dist 中变成这样：

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

希望这可以帮助。

于 2013-08-24T16:52:56.817 回答