css - usemin、rev、less、source maps 和 IE8 选择器计数支持

Question

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

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

目前，它是这样工作的:

• less 构建一个大文件 main-min.css在地区
• 已添加源 map main-min.css.map
• usemin 进程转为 main-min.<hash>.css , main-min.<hash>.css.map

展望 future ，它需要:

• less 构建一个大文件 main-min.css在地区
• 类似于https://github.com/project-collins/grunt-csssplit转换为 main-min-part1.css和 main-min-part2.css (等等)。目前不返回新文件的名称，不支持源映射——但这很容易修补和添加或从 FS 读取
• 使用 min 来选择新的拆分样式，例如，从 assetDir并单独包含所有内容(未串联)，这似乎缺乏尝试专门创建单个文件的示例/工作流程。
• 部分现在已修订
• 来源 map ？ (可以接受失去这个)

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

Answer 1

如果我正确理解您的要求，这是解决您问题的简要思路:

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.