CSS / JS 파일을 자동으로 결합하려면 어떻게해야합니까?

14

자바 스크립트 파일을 결합하기위한 스프로킷 을 알고 있지만 시도하지 않았습니다. 다른 옵션은 무엇이며 어떻게 쌓입니까?

optimization javascript css

— 세 비에르
소스

2

또한 실제 답변 은 아니지만 limi.net/articles/resource-packages 와 같은 리소스 패키지에 관심이있을 수 있습니다. 불행히도 아직 구현하지 않았다고 생각합니다.

— luiscubal

4

YUI를 사용하여 출력을 압축, 연결 및 캐시하는 Asp.Net에 대한 처리기를 작성했습니다.

소스는 다음과 같습니다. http://gist.github.com/130913

— 트래비스
소스

2

다른 질문으로 이미이 문제를 해결했습니다.

뒤늦게, 나는 프로그래머 사이트 대신 웹 마스터에게 요청했을 것이다.

3 가지 옵션이 있습니다.

프레임 워크에서 자동 처리
웹 서버가 자동으로 처리하도록하십시오
직접 옵션을 롤링하여 수동으로 수행

옵션 1 (CakePHP 확장 사용) :

사이트에 AssetPacker 를 다운로드하여 설치 하십시오 (jsmin 및 CSSTidy도 필요함). js 파일을 포함하는 몇 줄의 소스를 수정하십시오. 세척-> 헹굼-> 반복. Voila, 나머지는 자동으로 수행됩니다.

다른 프레임 워크를 사용한다면 가능할 것입니다. webdev 세계에서 매우 일반적인 요구 사항입니다.

옵션 2 (Apache 모드 사용) :

Apache 용 Google Pagespeed 모드를 살펴보십시오 . 그것은 당신이 묘사하는 모든 것과 훨씬 더 많은 일을합니다.

그래도 프로덕션 서버의 리소스를 모니터링하십시오. 일부 사람들은 이것이 서버의로드를 나쁜 방식으로 증가시키는 문제를 목격했습니다. 긍정적이지 않지만 효과적인 옵션이 되려면 충분한 정적 콘텐츠 전략이 필요할 수 있습니다.

옵션 3 :

정말로 원한다면 JS 파일 서버 측을 연결하고 모든 링크 관계를 하나로 결합하는 PHP 마법을 만들 수는 있지만 두 전략이 이미 수행하고있는 것입니다.

개인적으로이 옵션에 대해 강력히 권합니다.

Sprockets가 AssetPacker와 동일한 JS 파일을 연결하는 한, Ruby Gem으로 구현되었습니다. 그것이하지 않는 것은 js 코드를 축소하는 것입니다. 당신이 그것을 사용한다면, 아마도 jsmin gem을 잡는 것이 좋습니다. CakePHP에서 Sprockets + JSMin을 사용하는 방법에 대한 정보는 이것을 확인하십시오 .

나는 CakePHP에 중점을 둔다는 것을 알고 있지만 ... 플러그인이 CakePHP에 적용될 수 있다면 다른 프레임 워크에도 적용하는 것이 쉽지 않을 것이라고 가정합니다.

— 개정
소스

1

빠른 Google 검색을 통해 CSS 파일을 결합 할 수 있습니다. http://www.tothepc.com/archives/combine-merge-multiple-css-files/

— 마카
소스

불행히도 C #은 제 목적에는 맞지 않지만 누군가가 혜택을 누리기를 바랍니다.

— Cebjyre

1

당신은 그들을 결합 하시겠습니까? 공통 라이브러리를 사용하는 경우 CDN을 활용하여 자바 스크립트를 제공 할 수 있습니다. 그런 다음 브라우저 캐싱 (다른 사이트에서 동일한 CDN을 사용한다고 가정) 및 분산 전송을 활용할 수 있습니다. Microsoft 와 Google에는 각각 솔루션이 있으며 (정직하게 사용하지는 않았지만 확실히 시작할 것입니다) 다른 솔루션이있을 수 있습니다.

— 래리 스미스 미어
소스

1

ASP.NET 프로젝트의 경우 Karl Seguin의 지침에 따라 빌드 프로세스의 일부로 만들었습니다 .

Karl은 블로그에서 가장 잘 설명하지만 짧은 버전은 YUICompressor를 래핑하는 콘솔 앱을 설정하는 것입니다. 그런 다음 사이트의 JS 파일 위치에 대해 해당 콘솔 앱을 호출하도록 빌드 후 작업을 설정할 수 있습니다.

— 롤리 버크 너
소스

1

webapp이 PHP로되어 있다면 minify 사용을 고려해야합니다 :

여러 CSS 또는 Javascript 파일을 결합하고 불필요한 공백과 주석을 제거하고 gzip 인코딩 및 최적의 클라이언트 측 캐시 헤더와 함께 제공합니다.

— 톰
소스

1

이를 위해 파이썬은 실제로 유용 할 수 있습니다. 파이썬을 매우 빠르게 배울 수 있습니다. 나는 약 2 주 전에 시작했으며 첫 번째 응용 프로그램 (아직 완료되지 않음)은 원하는 것과 똑같은 일을 할 것입니다. DotLess 컴파일러와 마찬가지로 파일이나 디렉토리를 볼 수있는 감시 기능을 갖게되며, 변경되면 새 파일을 생성합니다.

파이썬은 다른 유지 관리 작업에도 적합하며 많은 시스템 관리자가 사용하는 것을 좋아합니다.

— 피클
소스

나는 펄 사람에 더 가깝고 아마도 무언가를 해킹 할 수는 있지만 기존 도구를 사용하고 싶을 것입니다.

— Cebjyre

끔찍한 자기 진흥이지만 @Pickels,이 프로젝트를 도와 주실 래요? code.google.com/p/lesscss-python

— Metalshark

0

Python을 사용하여 JS와 CSS 파일을 병합하고 축소하기 위해 Python3 (Mac OS, Windows 및 Linux 호환)으로 작성된 도구 인 Minifpy를 만들었습니다 .

Minifpy는 매우 쉬운 JSON 구성 파일을 사용하여 병합, 축소 또는 축소 할 파일을 정의합니다.

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

CLI에서이 도구를 사용할 수도 있습니다.

Minifpy는 JS / CSS 파일의 수정 사항을 감지하여 자동으로 병합 / 축소합니다 (개발에 유용함).

— 사무엘 다우 손
소스