Node.js가 등장한 이후 이를 이용한 다양한 모듈과 서비스들 쏟아져 나왔습니다. 아마 Ben Alman이 만든 Grunt 역시 그 중의 하나이며 가장 사랑받는 모듈 중의 하나일 것입니다. Grunt는 프론트엔드 웹 개발 및 배포 환경의 많은 부분을 자동화할 수 있도록 강력한 빌드 기능을 제공합니다. 특히 JavaScript를 통해 이러한 부분이 제어될 수 있다는 점 역시 프론트엔드 개발자들에게 Grunt가 사랑받는 이유 중의 하나일 것입니다.
그러나 대부분의 프론트엔드 개발 프로젝트는 강력해진 기능만큼이나 복잡한 개발 및 테스트, 배포 환경을 필요로 하게 되었고 부피가 커진 만큼이나 다루기가 어려워져 가고 있습니다. Grunt도 이 부분에서는 예외가 아닙니다.
이 튜토리얼은 프로젝트가 커질 수록 더 유용해지는 몇가지 Grunt 플러그인들과 Grunt의 빌드 프로세스 자체를 개선할 수 있는 핵심적인 내용을 살펴볼 것 입니다.
"Grunt는 개발자가 커스터마이징할 수 있는 강력한 빌드 환경을 제공합니다. 하지만 복잡하고 거대해진 프로젝트 빌드 환경을 관리하는 것은 프로그래밍과는 또다른 영역의 작업들을 수반합니다. Gruntfile을 얼마나 깔끔하게 관리할 수 있는지, 빌드를 얼마나 신속하게 끝낼 수 있는지, 빌드의 완료나 문제에 따른 알림 처리를 통해 작업에 빠르게 복귀할 수 있는지에 대한 문제는 프로젝트가 커질 수록 더 중요해집니다. 과거의 (물론 현재도) Makefile이 그랬듯이 큰 프로젝트를 관리하는 것은 프로페셔널의 또 다른 모습일 것입니다."
TL;DR;
프로젝트가 커질 수록 깔끔하게 정리되고 빠르고 선택적인 처리, 무언가가 잘못되었을 때 알림을 발생하는 빌드 시스템은 언제나 개발자에게 유용합니다. 이 튜토리얼은 최근 프론트엔드 개발에서 널리 쓰이고 있는 Grunt의 빌드 프로세스 자체를 다음 관점에서 살펴봅니다.
- 어떻게 Gruntfile을 산뜻하고 깔끔하게 유지할 수 있는가,
- 어떻게 빌드 시간을 극적으로 개선할 수 있는가,
- 빌드 시 발생한 이벤트들을 어떻게 전달받을 수 있는가.
> Gruntfile의 체계적인 정리
Gruntfile 체계화하는 것은 지속적인 빌드 설정의 관리와 유지 보수 측면에서 매우 중요합니다. Gruntfile 내에 수많은 Grunt 플러그인이나 수동 태스크들을 깔끔하게 정리할 수 있는 플러그인들은 다음과 같습니다.
- Grunt 플러그인의 자동로딩
- load-grunt-tasks는 package.json 파일을 분석할 것이며 이 태스크가 어떠한 Grunt 플러그인들에 대한 의존성들을 가지는지에 따라 이들 모두를 자동으로 로딩합니다.
- Grunt 설정의 파일 단위 분리
- load-grunt-config은 Gruntfile 설정을 작업 단위로 분리하며 load-grunt-tasks 및 그 기능들을 캡슐화해줍니다.
> 빌드 시간의 최소화
웹 앱의 실행 성능은 사업적으로 중요한 의미를 가지지만 빌드 성능은 개발의 반복에 대한 생산성을 담보합니다. 빌드 성능을 개선하기 위한 방법은 다음과 같습니다.
- 변경 파일들만의 빌드
- grunt-newer는 실제 파일 변경 정보를 저장하는 로컬 캐시를 통해 변경된 파일들에 대해서만 태스크를 실행합니다.
- 다중 태스크의 동시 실행
- grunt-concurrent는 CPU 단위의 스레드를 이용하여 동시에 여러개의 태스크를 실행합니다.
- 서로에 대해 독립적이며 큰 실행 시간을 필요로 하는 다량의 태스크들을 가지고 있을 때 유용합니다.
- 빌드 시간의 측정
- 작업 단위별로 실행 요구 시간을 측정하기 위해 time-grunt를 사용할 수 있습니다.
- 이는 다른 최적화와 마찬가지로 각 작업에 대한 최적화 지점을 찾을 수 있도록 합니다.
> 자동화된 시스템 알림
만약 다음 빌드가 가능하다던지 빌드 중의 오류를 개발자에게 알려주는 것은 자동화된 프로세스만큼이나 개발자에게 유용할 수 있습니다. 이런 기능이 필요하다면 grunt-notify는 Grunt 에러와 경고 전부에 대해 자동화된 알림을 제공하는 방법으로 사용할 수 있습니다.
보다 자세한 내용은 튜토리얼을 참고하시기 바랍니다.
번역 링크
- 여러분의 Gruntfile을 강력하게: 빌드 설정 쥐어짜기
댓글 없음:
댓글 쓰기