1

这是一个令人担忧的问题，在保留要求的同时难以解决。

使用usemin通过 grunt 任务来优化复杂且相当大的应用程序的构建。现在的问题是 IE8 和 IE9 正在从一个正在构建的单个文件中删除 CSS 规则声明，这是由于不明确的 4095 最大规则限制。

目前，它是这样工作的：

  • main-min.cssless在 dist 中构建一个大文件
  • 添加了源地图main-min.css.map
  • usemin 进程与 rev to main-min.<hash>.css,main-min.<hash>.css.map

展望未来，它需要：

  • main-min.cssless在 dist 中构建一个大文件
  • 像https://github.com/project-collins/grunt-csssplit之类的东西会转换为main-min-part1.css和main-min-part2.css（等等）。当前不返回新文件的名称，不支持源映射 - 但这很容易修补和添加或从 FS 读取
  • usemin 来拾取新的拆分样式，例如，从 anassetDir和 include all 单独（未连接），这在尝试专门创建单个文件的示例/工作流程中似乎缺乏。
  • 零件现已修订
  • 源地图？（可以接受失去这个）

这种设置的任何想法/示例表示赞赏。或替代方法。

4

1 回答 1

0

如果我正确理解您的要求，这是解决您问题的简要想法：

Steps:
    1. Defined a pattern in your index.html. For instance:
        <!--USE_MIN_BLOCKS-->
        <!--END_BLOCK-->
    2. Make a new replace task to replace above block with new usemin blocks dynamically (based on generated files of grunt-csssplit). 
    For instance:

    replace: {
    usemin: [{
        match: /<!--CSS_USEMIN_BLOCKS-->[\S\s]+<!--END_BLOCK-->/i, replacement: function() {
            //put your link tag here
            linkTag += '    <!-- build:css css/' + cssFile + ' -->\n';
            linkTag += '    <link rel="stylesheet" href="css/' + cssFile + '">\n';
            linkTag += '    <!-- endbuild -->\n';
        }
    }]
    }
    3. Run the replace:usemin task before usemin task.
于 2015-03-04T09:20:58.677 回答