grunt-usemin을 사용한 프론트엔드 자산 패키징
Source
Evernote/Technote scraps/grunt-usemin을 사용한 JavaScriptCSS 파일 팩키징.md
Summary
이 문서는 Grunt 기반 빌드 시스템에서 grunt-usemin 플러그인을 사용하여 HTML 내의 CSS 및 JavaScript 파일을 개발 시에는 모듈화하고, 프로덕션 배포 시에는 자동으로 병합(concat) 및 압축(minify)하는 방법을 설명한다. HTML 파일 내에 <!-- build:js/css ... --> 주석 블록을 삽입하여 처리 대상을 지정하면, useminPrepare 단계에서 Grunt 설정을 자동 생성하고 usemin 단계에서 HTML 참조 경로를 최종 빌드 파일로 교체한다. AMD/RequireJS 도입 없이도 HTML 의존성 관리를 해결할 수 있는 실용적인 접근법이다.
Key Points
- 개발 시에는 CSS/JS 파일을 모듈화하여 유지보수성을 높이고, 배포 시에는 단일 파일로 병합 및 압축하여 성능을 최적화한다.
- HTML 파일 내에
<!-- build:js <output_path> -->또는<!-- build:css <output_path> -->주석 블록을 사용하여 처리할 파일 그룹과 출력 경로를 정의한다. grunt-usemin은useminPrepare와usemin두 단계로 동작한다.useminPrepare: HTML 주석을 파싱하여concat,uglify,cssmin등 하위 플러그인의 Grunt 설정을 자동으로 생성한다.usemin: 실제 빌드 작업을 수행한 후, HTML 파일 내의 원본 파일 참조를 병합/압축된 최종 파일 경로로 교체한다.- Grunt 생태계(
grunt-contrib-*)와 호환되며, 별도의 모듈 로더(AMD 등) 도입 없이 HTML 레벨에서 의존성 패키징을 관리할 수 있다.