AngularJS 응용 프로그램에서 grunt-uncss를 어떻게 사용할 수 있습니까?

내 AngularJS와 애플리케이션은 두 개의 URL에 의해 구성되어AngularJS 응용 프로그램에서 grunt-uncss를 어떻게 사용할 수 있습니까?

http://myapp/#/foo
http://myapp/#/bar

이 단순화 된 index.html 파일 :

또한

<html> 

    <head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 

    <body> 
    <div ui-view></div> 
    </body> 

    <script type="text/javascript" src="script.js"></script> 

</html>

응용 프로그램을 포함하는 로직을 사용하는 경우 script.js 파일에는 0을 통해로드되는 html 템플릿도 포함됩니다서비스.

http://myapp/#/foo URL의 경우 foo html 템플릿이 <div ui-view></div> 요소에 삽입됩니다. 같은 방식으로 http://myapp/#/bar URL을 사용하면 바 html 템플릿이 <div ui-view></div>에 삽입됩니다.

내가하고 싶은 일은 style.css 크기를 줄이기 위해 grunt-uncss 작업을 사용하는 것입니다.

uncss: { 
    dist: { 
    files: { 
     'style.css': [ 'index.html' ] 
    } 
}

style.css 파일이 감소했다,하지만 foo는 및 바 페이지에서 요구하는 스타일을 포함하지 않았다 :

내 첫 번째 시도였다. 다시

uncss: { 
    options: { 
    urls; [ 'http://myapp/#/foo', 'http://myapp/#/bar' ] 
    }, 
    dist: { 
    files: { 
     'style.css': [ 'index.html' ] 
    } 
}

에서, style.css 파일이 감소했다,하지만 foo는 및 바 페이지에서 요구하는 스타일을 포함하지 않았다 :

은 deprecated urls parameter를 사용하던 내 두 번째 시도는 PhantomJS으로로드 할 .

누군가이 문제를 해결하는 방법을 알고 있습니까?

grunt-uncss는 정적 콘텐츠에서만 작동합니까? 사전에

감사합니다,

베르나르도 파 체코

출처

2014-10-29 Bernardo Pacheco

할 당신의 gruntfile에 아래 코드를 추가하는 것입니다/foo와/bar는 각각 고유 한 스타일 시트를 가지고 있습니까? 또는 모두 style.css에 포함되어 있습니까? –

@KevinB 아니요, 모든 스타일은 style.css 파일에 포함되어 있습니다. –

CSS가없는 여러 경로가있는 각진 앱에이 예제가 사용되지 않습니다. 또한 앞면에서 사용하고 있습니다. 나는'urls :'옵션이 작동하는 유일한 옵션 일 것이라고 생각합니다. 각도 앱이 html5 모드 인 경우에만 작동합니다. –

모든 HTML 파일을 포함하는 뷰 지정

uncss: { 
    dist: { 
     options: { 
      ignore: ['.ng-move', '.ng-enter', '.ng-leave', '.created_by_jQuery'] 
     }, 
     files: { 
      'style.css': [ 'index.html', 'views/foo.html', 'views/bar.html' ] 
     } 
    } 
}

당신은 HTML 개 이상의 파일을 지정할 수 있습니다, 그래서 당신이 포함되어야한다을 모든 보기 파일 (이 경우 foo.html 및 bar.html). 또한 ignore 옵션을 사용하여 런타임시로드되는 클래스 (html 파일에는 아직 존재하지 않음)를 추가하십시오 (예 : jQuery로 작성). ngAnimate (사용중인 경우).

더 많은 옵션이 있습니다. 예를 들어 uncssing 후에 남아 있어야하는 미디어 쿼리를 사용자 정의 할 수 있습니다. 작성자 - https://github.com/addyosmani/grunt-uncss에서 제공 한 설명서를 참조하십시오.

출처

2014-11-03 16:30:19 minijus

나는 비슷한 문제가 있는데, 나는 옵션을 무시했지만 uncss는 .firs.second와 같은 선택기를 사용하지 않았다. 그리고 나는이 CSS 파일에있는 선택기를 천이 가지고있다. – xzegga

같은데, 나는 options.urls와 array 의 URL을 파일에 저장하지만, 둘 다 런타임에 추가되는 지시어 템플릿의 모든 중첩/특정 스타일을 잘라 내기 때문에 실제로 앱의 렌더링 된 버전을 보지 못하는 것 같습니다. 나는 많은 지시어가있는 큰 각도의 앱에서 작동하는 예를보고 싶다. – simplesthing

이 프로젝트는 주입 된 클래스에 대한 자바 스크립트를 평가하지 않습니까? – Mark

뻔뻔한 플러그

당신은 GitHub의 내 예제의 repo를 참조 할 수 있습니다. 거기에 각도, bower 및 grunt-uncss를 실행하는 간단한 할부 애플 리케이션의 전체 예제가 있습니다.

편집 : 링크

https://github.com/JeremyCarlsten/grunt-uncss-angular-example

을 추가했다 그 생각에 대해 죄송 기본 구성은

uncss: { 
 
    dist: { 
 
    files: { 
 
     'path/to/where/you/want/cleaned.css': ['path/to/index.html'] // the index html could be a list of html files that all include css files 
 
    } 
 
    } 
 
},

출처

2015-04-27 12:38:47

이 답변은 현재 양식에서 매우 유용하지는 않지만 질문자가 제기 한 문제를 해결하는 데 사용되는 방법을 보여주는 관련 코드 스 니펫과 repo에 대한 링크를 추가 할 수 있다면이를 실행 가능한 것으로 만들 수 있습니다 대답. – user700390

AngularJS 응용 프로그램에서 grunt-uncss를 어떻게 사용할 수 있습니까?

답변

관련 문제