我已经努力了好几个小时，试图设置真正重写 url 的适当缩小。我用过 useref 和 usemin，它们在扫描 html、聚合所有 JS 和 CSS 并输出到一个文件方面做得很好。但是，对于我来说，我无法使 url 重写以正常工作。 我的结构很简单:

\root
   index.html
   application.css       // minified
   application.js        // minified
   \vendor
       \bootstrap
           \fonts        // font files here
           bootstrap.css // pre-minified 

bootstrap.css 使用相对 url 引用字体文件 - font/bootstrap_font.ttf 当 bootstrap 被缩小时，它作为应用程序 css 的一部分登陆，现在在我的根目录中，所以路径将从根目录指向 /font/bootstrap_font.ttf。原始目录层次结构保留，所以我基本上想将此 url 重写为 /vendor/bootstrap/font/bootstrap_font.ttf

还有，哦，为什么 cssmin 任务不接受多个文件？

更新 这是我当前的 grunt 文件:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        useminPrepare: {
            html: 'web/public/index.html',
            options: {
                dest: 'web/public-dist'
            }
        },
        usemin: {
            html: 'web/public-dist/index.html',
        },
        copy: {
            all: {
                files: [{
                    expand: true,
                    cwd: 'web/public/',
                    src: ['**'],
                    dest: 'web/public-dist/'
                }]
            },
            resources: {
                files: [{
                    expand: true,
                    cwd: 'web/public/',
                    src: ['**/*.*', '!**/*.js', '!**/*.css', '!**/*.txt'],
                    dest: 'web/public-dist/'
                }]
            }
        },
        uglify: {
            options: {
                mangle: true,
                sourceMap: false,
                compress: true,
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            standard: {
                files: [{
                    expand: true,
                    cwd: 'web/public-dist/',
                    src: ['**/*.js'],
                    dest: 'web/public-dist/'
                }]
            }
        },
        cssmin: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
            },
            standard: {
                files: [{
                    expand: true,
                    cwd: 'web/public-dist/',
                    src: ['**/*.css'],
                    dest: 'web/public-dist/'
                }]
            },
        }
    });

    grunt.registerTask('package', [ 'copy:resources', 'useminPrepare', 'concat:generated','cssmin:generated', 'uglify:generated', 'usemin']);
};

在这种形式下，cssmin 甚至不能用作单独调用的目标，因为显然它的配置是错误的——它提示说它不能接受很多文件。我在这里做错了什么？

从我收集到的点点滴滴来看，显然更改 usemin 流程并且不允许它稍后连接所有 css 和 cssmin 是至关重要的 - 因为这样，它显然会丢失关于每个目录起源的重要信息CSS 文件。我试过更改流程，但由于相同的 cssmin 错误而无法正常工作 - 无法接受许多文件。

最佳答案

好的，当我开始用 grunt 构建我的 css 和 js 时，我肯定遇到了同样的问题。这是我对“相对网址”问题的解决方案。请注意，这篇文章并没有回答您的实际问题，而是提供了另一种解决问题的方法。我有更多的嵌套文件夹结构，但对我来说效果很好，希望对您有所帮助。

要点是将所有 css/js 构建到另一个文件夹并将 Assets 文件相对复制到这个新文件夹。让我们为它命名为“build”:

\root
   \build
       application.css - minified
       application.js  - minified       
       \fonts
           ...
       \img
           ...
       ...
   index.html
   \ ...

使用 grunt-contrib-copy插件将所有 Assets 复制到/build/assets 目录而不破坏其原始结构。因此，相对于您的 css 保存而言，字体仍在 ./fonts/文件夹中。

使用这种方法您将面临的问题是保存 Assets 的文件夹结构。好吧，它通过在你的 gruntfile 中对你的构建配置进行 detalization 来解决。现在你不能说“好吧，咕噜，将所有/**/*.css 文件构建到 application.css”，而是必须针对不同的文件结构选项描述不同的情况。如果您的元素具有明显且合乎逻辑的文件结构，则添加它们并不复杂。

我使用的规则是每个 css 文件都必须有 assets 目录作为它的同级文件。所以 gruntfile 只扩展了几行，构建结构看起来像这样

\root
   \build
       \css
           \assets
               \fonts
               \img
           application.css - minified    //all relative passes saved
   \foo
       \bar
           \biz
               \assets
                   \fonts
               first.css
       \row
           \assets
               \img
           second.css
   index.html

显然，您必须具有 Assets 名称命名规则以防止覆盖文件。

希望对你有帮助

关于javascript - 如何通过 url 重写在 Web 元素中正确缩小/合并 CSS/JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26803237/