2014-10-29 4 views
11

이 질문을하기 전에 StackOverflow에 severalsimilarquestionsposted이 있지만 그 중 어느 것도 문제에 대한 정확한 해결책을 제공하지 못함을 지적하고 싶습니다. 그런트 프로덕션 환경에 대한 하나 개의 파일로 결합하고 축소하고 여러 CSS 파일 위치를CSS 및 Grunt 축소의 상대 경로는 무엇입니까?


문제는 내가 워크 플로 설정을 가지고있다.

내가 직면 한 문제는 글꼴과 이미지 경로가 기존의 상대 파일 경로를 가리키고 있기 때문에 Grunt를 실행 한 후에 손상된다는 것입니다. static/homepage/startup/common-files/css/icon-font.css

나는 다음과 같은 CSS 규칙이 있습니다 : 내 Gruntfile에서

@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot); 

을, 나는 나의 축소 된 CSS 파일의 출력이 style.min.cssstatic/css/custom/homepage/에 위치하도록 지정 예를 들어

. 이 문제는 파일 경로가 변경되어 모든 글꼴 및 이미지 종속성이 더 이상 발견되지 않고 브라우저에서 404 상태를 반환한다는 결과입니다.

  1. 복사 모든 종속 파일이 있도록 그들이 상대 위치 : 나는이 문제를 해결하려면 두 가지 옵션이 있다고 생각했습니다이

    를 해결하려고했던 어떤

    새로운 디렉토리 style.min.css가 상주합니다. 이 단점은 빠르게 지저분 해져서 프로젝트 폴더 구조를 망칠 수 있다는 것입니다!

  2. 수동으로 경로를 수동으로 변경하십시오. 그러나 다시,이 점은 무엇입니까? Grunt는 작업 자동화를 위해 설계되었습니다!

아무도이 문제를 해결하는 방법을 알고 있습니까? 나는 이것에 거의 10 시간을 낭비하고 나는 포기하는 것을 시작하고있다. 사람들은 Github issue page에서 문제를 해결했다고 주장하지만 아무도 정말로 어떻게 고쳐야한다고 말하지 않습니다.

편집 :

나는 clean-css library 소스 코드를 검토 한 결과 당신은 minifier 객체에 relativeTo 속성을 전달할 수 있다는 것. 나는 이것으로 주변을 어지럽 혔지만, 나는 여전히 붙어있다. 나는 이것에 관해 더 이상 이해하면 다시보고 할 것이다.

편집 :

마침내 relativeTo (및 기타) 특성이 무엇을 설명하고 몇 가지 문서를 발견했습니다 좋아요. 나는 아직도


relativeTo - path to resolve relative @import rules and URLs 
root - path to resolve absolute @import rules and rebase relative URLs 
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding 
target - path to a folder or an output file to which rebase all URLs 

여기 참조를 위해 내 그런트 구성 파일입니다 .... 내 구성이 비록 내 파일 구조해야 정확히 무엇에 붙어있어 :

module.exports = function(grunt) { 
     grunt.initConfig({ 
      concat: { 
       homepage: { 
        src: [ 
         'static/homepage/startup/common-files/css/icon-font.css', 
         'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css', 
         'static/homepage/startup/flat-ui/css/flat-ui.css', 
         'static/homepage/static/css/style.css' 
        ], 
        dest: 'static/css/custom/homepage/compiled.css', 
       } 
      }, 
      cssmin: { 

       homepage: { 
        src: 'static/css/custom/homepage/compiled.css', 
        dest: 'static/css/custom/homepage/style.min.css' 
       } 
      }       
     });    

     grunt.loadNpmTasks('grunt-contrib-concat'); 
     grunt.loadNpmTasks('grunt-contrib-uglify'); 
     grunt.loadNpmTasks('grunt-contrib-cssmin'); 
     grunt.loadNpmTasks("grunt-css-url-rewrite"); 
     grunt.registerTask('build', ['concat', 'cssmin']); 
     grunt.registerTask('default', ["build"]); 
}; 

감사합니다.

+0

나는 'relativeTo', 'target'및 'root'를 성공하지 않고 놀려고 노력하는 데 많은 시간을 보냈다./ – jitowix

+0

해결책에 가까워지고 있습니다! 나의 코멘트를 여기에서 보아라. (나의 사용자 이름은 jjmpsp이다.) https://github.com/yeoman/grunt-usemin/issues/225 –

+0

Ok 나는 내일 그것을 보려고 노력할 것이다. (나는 이미 고통을 느낍니다 ^^) – jitowix

답변

-2

이것은 반드시 질문에 대한 직접적인 대답은 아니지만 가능한 해결 방법입니다. IMO, 디렉토리 구조를 약간 리팩토링하고 gruntfile을 tweek하면 더 나아질 수 있습니다.

새로운 구조 :

project-root 
    /assets 
    /styles 
     (various css files) 
    /scripts 
     (js files) 
    /images 
     (image files) 
    /fonts 
    /vendor (if needed) 
     /plugin files 

당신이 저장하거나 변경하는 경우 등 imagemincopy로, 새 디렉토리 구조로 배치 파일을 가질 수 있습니다, 몇 툴툴 거리는 소리 작업에 추가하는 경우 :

project-root 
    /assets 
    /dist 
    /styles 
     /styles.css 
     /styles.min.css 
    /scripts 
     /scripts.min.js 
    /images 
     (minified images) 
    /fonts 
     (minified fonts) 

자세히 알아보기 :

  • dist/styles/style.cssdist/scripts/scripts.jsdist/styles/style.min.css
  • CONCATENATE JS 파일에 해당 파일 후 dist/scripts/scripts.min.js
  • 사용 이미지로 해당 파일 이 작게를 위해 작게하다 어떤 이미지가 assets/images 폴더에 추가로 dist/images
  • 사용 복사에 복사 작게하다 dist/fonts

새 워크 플로우에 assets/fonts에서 글꼴을 복사하는 것은 assets 디렉토리 내에서 작동하는 유일한 것, 모든 추가 거기에 이미지의 모든 글꼴 등. 그러나 dist 폴더로 출력 될 때 파일과 관련된 자산을 참조합니다.

모든 스타일 시트, 스크립트 등은 dist 폴더를 가리 킵니다.

게다가 대부분의 사람들이 일종의 축소를 거치기 때문에 모든 자산이 멋지고 슬림합니다.

플러그인 등의 공급 업체 파일이 필요한 경우 공급 업체 디렉토리를 추가 할 수 있습니다 (수동으로 작성하는 것이 아니라 Bower로 추가하는 것이 더 좋음). 그런 다음 필요한 파일을 적절한 연결 작업에 포함 할 수 있습니다.