2014-01-09 4 views
1

모든 CSS 파일을 제공하기 전에 모든 CSS 파일을 단일 리소스로 결합하여 페이지를 최적화하고 싶습니다. 그러나 여러 개의 대체 스타일 시트를 사용하고 있는데 분명히 개별 링크로 포함되어야합니다.대체 스타일 시트를 하나의 파일로 결합하기

대체 스타일 시트를 데이터에 채우는 것과 같은 이상한 속임수 이외에 : 인라인하는 URI (영리하면서도 ... 우)는 하나의 파일로 병합하는 방법이 있습니까? 나는 CSS의 어떤 종류의 @ -rule이 (링크의 미디어 속성이 CSS의 @media로 대체 될 수있는 것처럼) 생각할 수 있지만 찾지 못했습니다.

+0

[yepnope] (http://yepnopejs.com/) 이런 종류의 일을 할 것입니다 – Liam

+0

이 MVC입니까? 나는 그것이 무엇인지 짐작하고있다. 그렇다면 [MVC4는 이것에 대한 funcitonality를 가지고있다] (http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification) – Liam

답변

1

당신은 손으로 할 수 있지만, 정말 지루하고 시간이 갈수록 고통 스럽습니다. 스타일 시트를 변경할 때마다이 작업을 수행하는 일종의 프로세스가 필요한 것 같습니다.

당신이해야 할 일은 그루트 (Grunt)와 같은 디렉토리에 빌드 도구를 통합하는 것입니다. 그란트를 시작하기위한 초보자 가이드를 작성했습니다 : http://strongloop.com/strongblog/use-grunt-js-and-the-power-of-javascript-to-automating-repetitive-tasks/

정확한 내용을 담고있는 Repo입니다 : https://github.com/gruntjs/grunt-contrib-cssmin .. Repo에서 노드 패키지 관리자를 가져 오거나 노드 패키지 관리자를 사용하여 설치해야합니다. 귀하의 프로젝트에 로컬로.

아주 간단하고 빌드를 최적화 할 수있는 다양한 옵션을 제공합니다. CSS뿐만 아니라 HTML 및 JavaScript도 마찬가지입니다. 하늘은 빌드 옵션의 한계입니다. 이것이 대부분의 프런트 엔드 개발 프로세스가 진행되는 방식 인 것 같습니다.

그란트는 블록에있는 유일한 아이가 아니며, 거기에는 예만과 그 주위에 몇 가지 다른 것들이 있습니다.

우리는 그란트를 한계까지 밀었으며 다양한 옵션으로 수많은 톤을 만들었지 만 우리는 아직 실망해야합니다. 프론트 엔드에서 프로세스를 간소화하고 코드를 최적화하여 다른 디렉토리에서 프로덕션 준비를 할 수 있습니다.

1

나는 Grunt, Brunch (http://brunch.io/) 또는 Gulp (http://gulpjs.com/)를 사용하는 Yeoman (http://yeoman.io/)으로 이동합니다.

exports.config = 
    files: 
    stylesheets: 
     joinTo: 
     'stylesheets/app.css': /^.*/ 
     order: 
     after: ['vendor/styles/helpers.css'] 

(당신이 JS에 대해 동일한 작업을 수행 할 수 있습니다

내 옆에서

, 난 당신이 설정의이 종류를 설정할 수 (내가 정말 쉽게 설정 찾을 원인) 브런치 더 익숙 해요 파일 실제로)

관련 문제