usemin, rev, less, source maps and IE8 selector count support

144 views Asked by At

This is a source of concern and hard to solve whilst retaining the requirements.

Using usemin via grunt tasks to optimise a build of a complex and rather large application. The problem right now is that IE8 and IE9 are dropping CSS rule declarations from a single file being built on account of the ambiguous 4095 max rules limit.

currently, it works like so:

  • less builds one big file main-min.css in dist
  • source map added main-min.css.map
  • usemin process with rev to main-min.<hash>.css, main-min.<hash>.css.map

going forward, it needs:

  • less builds one big file main-min.css in dist
  • something like https://github.com/project-collins/grunt-csssplit converts to main-min-part1.css and main-min-part2.css (and so on). currently does not return names of new files, no support for source maps - but this is easy to patch and add or read from the FS
  • usemin to pickup the new split styles eg, from an assetDir and include all separately (not concatenated), which seems lacking in examples/workflow that try to create single files exclusively.
  • parts now rev'd
  • source maps? (acceptable to lose this)

any ideas / examples of such a setup appreciated. or alternative approaches.

1

There are 1 answers

0
truongnguyen1912 On

If I understand your requirement correctly, this is the brief idea to solve your problem:

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.