usemin, rev, less, 소스 맵 및 IE8 선택기 카운트 지원 ​​

Question

요구 사항을 유지하면서이 문제는 근원적 인 문제이며 해결하기 어렵습니다.

복잡한 작업을 통해 usemin을 사용하면 복잡하고 다소 큰 응용 프로그램의 빌드를 최적화 할 수 있습니다. 현재 문제는 IE8과 IE9가 모호한 4095 개의 최대 규칙 제한으로 인해 하나의 파일에서 CSS 규칙 선언을 삭제한다는 것입니다.

현재, 그것과 같이 작동합니다

• 이하 main-min.<hash>.css.map

가고, 소스지도 main-min.<hash>.css에 회전과 main-min.css.map

usemin 프로세스를 추가

DIST에 하나 개의 큰 파일 main-min.css를 구축 앞으로, 그것은 필요합니다 :

• 이하 DIST에서 하나 개의 큰 파일 main-min.css를 구축
https://github.com/project-collins/grunt-csssplit 같은
• 뭔가 main-min-part1.css 및 main-min-part2.css로 변환 (등). 현재 새 파일의 이름을 반환하지 않으며 원본 맵을 지원하지 않습니다. 그러나이 패치를 적용하고 FS에서 추가하거나 읽으려는 것이 쉽습니다. 예를 들어 assetDir에서 새 분할 스타일을 가져오고 모두 별도로 포함하려면 FS
• ), 독점적으로 단일 파일을 만들려고하는 예제/워크 플로에서는 부족한 것처럼 보입니다.
• 부품은 지금 rev'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.