Question

这是一个值得关注的问题，在保留要求的同时难以解决。

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

目前，它的工作原理如下：

less在dist

main-min.css

源地图已添加main-min.css.map
usemin进程，其中rev为main-min.<hash>.css，main-min.<hash>.css.map

未来，它需要：

less在dist

main-min.css

类似https://github.com/project-collins/grunt-csssplit的内容会转换为main-min-part1.css和main-min-part2.css（依此类推）。目前不返回新文件的名称，不支持源地图 - 但这很容易修补和添加或读取FS
usemin来拾取新的分割样式，例如，来自assetDir并且包括所有单独的（不连接），这似乎缺少尝试专门创建单个文件的示例/工作流。
部分现在rev＆＃39; d
源地图？（可以接受失去这个）

此类设置的任何想法/示例都表示赞赏。或替代方法。

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.

usemin，rev，less，源映射和IE8选择器计数支持

1 个答案: