16

在我问这个问题之前，我想指出在 StackOverflow 上发布了几个 类似的 问题 ，但它们都没有为问题提供准确的解决方案。

问题

我有一个工作流设置，其中 Grunt 将多个 css 文件组合并缩小为一个用于生产环境的文件。

我面临的问题是字体和图像路径在运行 Grunt 后会中断，因为它们仍然指向它们现有的相对文件路径。

举个例子：

在static/homepage/startup/common-files/css/icon-font.css我有以下CSS规则：

@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);

在我的 Gruntfile 中，我指定我希望缩小的 css 文件的输出style.min.css位于static/css/custom/homepage/. 这样做的问题是文件路径发生了变化，导致不再找到所有字体和图像依赖项，并在浏览器中返回 404 状态。

我做了什么来尝试解决这个问题

我认为有两个选项可以解决此问题：

  1. 复制所有依赖文件，以便它们与style.min.css所在的新目录相关。这样做的缺点是它可能很快变得混乱并破坏我的项目文件夹结构！
  2. 手动更改路径。但是话又说回来，这有什么意义呢？Grunt 专为自动化任务而设计！

有谁知道如何解决这个问题？我已经在这上面浪费了将近 10 个小时，我开始放弃了。人们声称已经在Github 问题页面上解决了这个问题，但没有人真正说出他们是如何解决的。

编辑：

我查看了clean-css 库源代码，您似乎可以将relativeTo属性传递给 minifier 对象。我对此感到一团糟，但我仍然陷入困境。如果我对此有任何进一步的了解，我会报告。

编辑：

好的，我终于找到了一些文档来解释relativeTo（和其他）属性的作用。不过，我仍然坚持我的文件结构应该是什么配置......

relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or an output file to which rebase all URLs

这是我的 Grunt 配置文件供参考：

    module.exports = function(grunt) {
        grunt.initConfig({
            concat: {
                homepage: {
                    src: [
                        'static/homepage/startup/common-files/css/icon-font.css', 
                        'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
                        'static/homepage/startup/flat-ui/css/flat-ui.css',
                        'static/homepage/static/css/style.css'
                    ],
                    dest: 'static/css/custom/homepage/compiled.css',
                }
            },
            cssmin: {

                homepage: {
                    src: 'static/css/custom/homepage/compiled.css',
                    dest: 'static/css/custom/homepage/style.min.css'
                }   
            }                           
        });             

        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks("grunt-css-url-rewrite");
        grunt.registerTask('build', ['concat', 'cssmin']);
        grunt.registerTask('default', ["build"]);
};

谢谢。

4

1 回答 1

1

static/css/custom/homepage在as中创建一个 less 文件styles.less

@import你的CSS相对：

@import "../../../homepage/startup/common-files/css/icon-font.css";
@import "../../../homepage/startup/flat-ui/bootstrap/css/bootstrap.css";
@import "../../../homepage/startup/flat-ui/css/flat-ui.css";
@import "../../../homepage/static/css/style.css";

然后在你的 gruntfile.js 中：

module.exports = function(grunt) {
    grunt.initConfig({
      less: {
        dist: {
            options: {
                compress: true,
                sourceMap: false,
                // Add any other path/to/fonts here
                paths: ['static/homepage/startup/common-files']
            },
            files: {
                'public/css/dist/style.min.css': 'public/css/default/styles.less'
            }
        }
    }       
  });             

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks("grunt-css-url-rewrite");
  grunt.registerTask('build', ["less:dist"]);
  grunt.registerTask('default', ["build"]);
};
于 2018-06-23T04:16:42.643 回答