자바 스크립트 빌드 도구 Grunt : : Outsider ' s Dev Story 
 자바 스크립트 빌드 도구 Grunt 
 약간 의 귀차 니즘 으로 노드 등 의 자바 스크립트 프로젝트 에 는 그동안 빌드 도구 를 사용 하 지 않 고 있 었 다 . 자바 스크립트 쪽 빌드 도구 에 는 Cake ( 이전 글 참조 ) 나 Jake 등 이 있 는데 Grunt 를 사용 하 기 로 결정 했 다 . ( Grunt 를 선택 하 게 된 주 된 이유 는 스 캐 폴 딩 때문 이 긴 한데 이 얘기 는 나중 에 . ..) Jake 는 한 번 도 안 써 보 았 고 Cake 는 약간 써 보 긴 했 는데 Make 류 이 기 때문 에 아주 유연 하 게 테스 크 를 작성 할 수 있 기 는 하 지만 일일이 다 해야 되 는 귀차 니즘 도 좀 있 는데 Grunt 가 기본 으로 제공 하 는 부분 이나 확장 성 도 괜찮 아 보여서 일단 써 보 기 로 했 다 . jQuery 도 1 . 8 부터 는 Grunt 를 사용 하 고 있 다 . ( 분위기 파악 을 다 못 하 긴 했 는데 4 . 0 을 준비 하 고 있 어서 인지 몰라도 문서화 가 잘 안 되 어 있 다 . 과거 버전 기준 인 것 도 있 고 아예 안 채워진 것 들 도 있 고 ㅠㅠ ) 참고 로 Grunt 는 자바 스크립트 용 빌드 도구 다 . 
 Grunt 는 Node . js 로 만들 어 졌 고 npm 에 등록 이 되 어 있 으므로 일반 적 인 Node . js 커맨드 라인 도구 처럼 글로벌 로 설치 하 면 된다 . ( 당연히 Node . js 는 설치 가 되 어 있 어야 한다 . ) 
 grunt v 0 . 3 . 17 
 이 글 을 쓰 는 시점 에 최신 버전 은 0 . 3 . 17 이 고 곧 0 . 4 가 나올 듯 하 다 . ( 0 . 4 에 얼마나 바뀌 는지 는 잘 모르 겠 다 . ) 버전 이 정상 적 으로 출력 된다면 Grunt 를 사용 할 준비 는 다 된 것 이 다 . 
 Grunt 는 init 명령어 를 통한 템플 릿 기능 으로 프로젝트 를 시작 하 기 위한 스 캐 폴 딩 파일 과 구조 를 자동 으로 생성 해 준다 . 즉 , 어떤 프로젝트 에 기반 이 되 는 파일 과 구조 를 프로젝트 에 맞 게 자동 으로 만들 어 주 고 있 는데 현재 Grunt ( 0 . 3 . 17 ) 기준 으로 다음 의 템플 릿 을 지원 하 고 있 다 . 
 commonjs - CommonJS 프로젝트 
 gruntplugin - Grunt Plugin 프로젝트 
 jquery - jQuery Plugin 프로젝트 
 node - Node . js 프로젝트 
 gruntfile - grunt . js 
 이렇게 5 가지 인데 앞 의 4 개 는 프로젝트 특성 에 맞 게 소스 파일 , 테스트 파일 , 라이센스 파일 등 을 자동 으로 생성 해 주 고 마지막 grunt . js 는 Make 를 사용 하 려면 Makefile 이 필요 하 듯이 Grunt 를 사용 하 려면 각 프로젝트 에 grunt . js 라는 파일 이 있 어야 하 는데 이 파일 을 기본 적 인 내용 으로 만들 어 주 는 것 이 다 . 템플 릿 을 사용 하 려면 grunt init : 템플 릿 이름 의 명령어 를 사용 하 면 된다 . ( 위 리스트 에서 앞 에 가 그런 트 가 사용 하 는 템플 릿 의 이름 이 고 뒤 에 는 설명 이 다 . ) 
 위 화면 처럼 Node . js 프로젝트 를 하 려면 grunt init : node 라고 하 면 프로젝트 에 필요 한 정보 를 묻 는 프롬프트 가 나오 고 필요 한 대로 입력 하 면 그 에 맞 게 템플 릿 파일 이 생성 된다 . 괄호 안 에 있 는 값 이 기본 값 이 므로 기본 값 을 그냥 사용 하 려면 엔터 만 쳐도 되 고 새로운 값 을 입력 하 거나 빈값 으로 하 려면 none 을 입력 하 면 된다 . 템플 릿 명 이 기억 이 나 지 않 으면 grunt init 만 입력 하 면 이름 이 지정 안 되 었 다고 오류 내 면서 사용 할 수 있 는 템플 릿 이름 을 보여준다 . 
 example _ test . js 
 node 템플 릿 을 기준 으로 위 와 같 은 구조 의 파일 들 을 자동 으로 만들 어 준다 . 기본 적 인 프로젝트 구조 들 은 매번 작업 할 때 마다 해야 하 는 귀찮 은 작업 이 기 때문 에 이 기능 은 좋 은 시작점 이 된다 . 
 템플 릿 기능 은 사실 좀 부 가 기능 으로 보이 고 Grunt 가 빌드 도구 이 므로 프로젝트 중 에 계속 반복 해야 하 는 작업 들 을 Grunt 로 편리 하 게 사용 할 수 있 다 . 프로젝트 에 Grunt 를 사용 하 려면 프로젝트 의 루트 경로 에 grunt . js 라는 파일 이 존재 해야 한다 . 다음 은 grunt init : gruntfile 을 실행 하 면 자동 으로 생성 되 는 grunt . js 파일 이 다 . 
 자바 스크립트 파일 을 lint 할 대상 을 배열 로 지정 한다 . 여기 서 lint 는 더글라스 크 록 포드 의 lint 라기 보 다는 코드 를 검사 해 준다는 면 에서 범용 적 인 의미 의 동사 로 사용 한 것 으로 보인다 . 실제 검사 는 JSHint 를 사용 해서 검사 가 이뤄 진다 . 그리고 대상 을 지정 할 때 위 에서 는 files 라는 이름 을 주 었 는데 원 하 는 이름 을 사용 해서 여러 가지 로 지정 할 수 도 있 다 . 
 client : [ ] , 
 이런 식 으로 대상 의 세트 를 여러 가지 로 만들 수 있 다 . lint 의 실행 은 grunt lint : 대상 이름 으로 실행 한다 . grunt lint : all 을 하 면 all 에 지정 된 대상 파일 들 을 lint 하 고 이름 을 주 지 않 고 grunt lint 하 면 모든 대상 을 다 lint 한다 . 
 jQuery 의 테스트 프레임 워크 인 QUnit 의 대상 파일 을 지정 한다 . grunt qunit 으로 실행 할 수 있 는데 원래 의 QUnit 이 브라우저 로 실행 하 는 데 반해서 grunt 에서 는 브라우저 없이 PhantomJS 를 사용 해서 실행 한다 . ( 지정 한 HTML 파일 을 띄운 것 처럼 ) 그러므로 Qunit 을 사용 하 려면 PhantomJS 가 설치 되 어 있 어야 한다 . lint 와 마찬가지 로 대상 파일 의 세트 를 여러 가지 로 지정 할 수 있 다 . 
 concat / min 
 concat 은 자바 스크립트 파일 을 합치 는 것 을 의미 한다 . 개발 과정 에서 는 모듈 화 로 파일 을 분리 해서 개발 하 지만 배포 단계 에서 는 하나 의 파일 로 합쳐서 나가 는 것 이 좋 기 때문 에 합치 는 과정 을 말 하 고 min 은 불 필요 한 공백 이나 줄 바꿈 을 없애 서 파일 사이즈 를 줄이 는 걸 말 한다 . ( 난독 화 와 는 다르 다 . ) 그래서 concat 과 min 에서 는 설정 이 depth 가 한 단계 더 있 다 . src 에 설정 한 파일 들 을 dest 로 내보내 게 되 고 이러 한 설정 을 당연히 여러 세트 로 만들 수 있 다 . 
 watch 는 files 에 지정 된 파일 들 의 변경 사항 을 감시 하 다가 변경 사항 이 발생 하 면 tasks 에 지정 된 동작 을 실행 한다 . 그러므로 앞 의 설정 과 는 다르 게 여러 세트 를 설정 할 수 는 없 다 . 여기 서 는 Grunt 의 디렉티브 를 사용 해서 lint 설정 에서 files 로 지정 한 파일 들 을 감시 하 다가 변경 되 면 lint 와 qunit 을 실행 하 도록 했 다 . 
 앞 에서 지정 한 min 에서 사용 할 UglifyJS 의 설정 이 다 . lint 를 위해서 JSHint 를 설정 한 것 이 라 같 다고 보 면 된다 . 
 위 의 기본 생성 된 grunt . js 에 는 나오 지 않 았었 지만 테스트 파일 에 대한 설정 도 할 수 있 다 . 앞 에서 qunit 부분 이 클라이언트 측 자바 스크립트 테스트 라면 test 는 서버 사이드 자바 스크립트 테스트 이 다 . 테스트 는 Nodeunit 을 사용 하 는데 mocha 를 쓰 는 나 로써 는 테스트 명령어 를 임의 로 할 수 없 는 게 좀 불만 이 다 . 
 태 스 크 ( Task ) 
 설정 을 간단히 살펴보 았 는데 앞 에서 도 좀 언급 을 했 지만 Grunt 는 기본 으로 제공 하 는 테스 크 들 이 있 다 . 
 이 태 스 크 들 은 grunt 태 스 크 이름 이나 grunt 태 스 크 이름 : 타 겟 이름 으로 실행 할 수 있 다 . 앞 에서 설정 이 테스트 이름 을 그대로 사용 한 설정 과 일반 설정 이 함께 있 어서 처음 엔 좀 헷갈린다 . 앞 에서 설명 하 지 않 은 것 은 server 태 스 크 뿐 인데 이 는 특정 폴더 를 기준 으로 정적 서버 를 띄워 주 는 기능 인데 설계 상 오류 가 아닌가 싶 을 정도 로 동작 이 이상 하 다 . grunt 는 더 이상 실행 항 태 스 크 가 없 으면 종료 가 되 는데 그 때문 에 grunt server 를 하 면 시작 하 자마자 바로 종료 되 므로 server 테스 크 의 문서 에서 는 소스 를 넣 어 주 라고 가이드 하 고 있 는 그런 짓 을 하 느니 그냥 Locally 같 은 걸 쓰 고 말 겠 다 . 
 여기 까지 는 Grunt 가 기본 으로 제공 하 는 기능 들 이 고 Grunt 가 API 를 제공 하 기 때문 에 이 를 이용 해서 플러그인 을 만들 수 있 다 . 플러그인 목록 은 Grunt 홈페이지 에 나와 있 고 Grunt 가 제공 하 지 않 는 기능 들 을 내장 태 스 크 처럼 사용 할 수 있 도록 설정 할 수 있 다 . 자세 한 사용 방법 은 각 플러그인 의 가이드 를 참고 해야 하 는데 실제로 Grunt 플러그인 은 NPM 모듈 들 이 다 . 그래서 프로젝트 로컬 에 NPM 모듈 을 설치 한 뒤 다음 과 같이 grunt . js 에서 불러 들 어서 사용 하 는 구조 이 다 . 
 이 방법 이 그리 깔끔 한 방법 인지 약간 고민 되 긴 하 지만 npm 모듈 을 설치 해야 하 니 package . json 에 의존 성 을 명시 해서 설치 하 도록 해 놓 고 함께 사용 하 는 게 좋 은 방법 일 것 같 다 . 
 별도 로 직접 작성 한 플러그인 은 다른 폴더 에 작성 한 후 다음 명령어 로 불러 와서 사용 할 수 도 있 다 . 
 grunt . loadTasks ( ' 폴더 명 ') 
 Grunt 에서 는 테스 크 에 대한 별칭 ( Alias ) 을 지정 할 수 있 다 . 위 의 grunt . js 파일 에서 마지막 에 다음 과 같 은 라인 이 있 는 것 을 볼 수 있 다 . 
 기본 동작 에 대한 등록 인데 사실 이 는 lint , qunit , concat , min 태 스 크 에 대한 별칭 을 default 로 준 것 이 고 default 는 예약 된 별칭 으로 grunt 만 입력 하 면 grunt default 와 동일 하 다 . 그렇 기 때문 에 자주 사용 하 는 것 을 default 에 입력 하 면 편리 하 고 말 그대로 별칭 이 기 때문 에 한꺼번에 자주 사용 하 는 것 들 은 묶 어서 별칭 을 만들 어 두 면 더 편리 하 게 사용 할 수 있 다 . 
 2013 / 01 / 14 02 : 56 2013 / 01 / 14 02 : 56 
 2013 / 01 / 14 02 : 56 
 build tools , cli , grunt , node . js 
 상돌 | 2013 / 01 / 14 09 : 24 + M / D Reply 
 Yeoman 사용 하 면서 Grunt 에 대해 궁금 했었 는데 깔끔 하 게 잘 정리 해 주 셔서 감사 합니다 . 
 Outsider | 2013 / 01 / 14 20 : 20 + M / D 
 전 Yeoman 은 안 써 봤 는데 내부 에서 Grunt 를 쓴다고 하 더라구요 . .. 요즘 yeoman 얘기 도 많이 들 어서 조만간 써 봐야겠어요 ㅎ 
 옷 장수 | 2013 / 03 / 12 18 : 16 + M / D Reply 
 grunt 소개 가 너무 잘 정리 되 어 있 네요 . 
 감사 하 게 보 고 갑니다 . ( __) 
 Outsider | 2013 / 03 / 13 00 : 43 + M / D 
 지금 은 0 . 4 로 업 글 되 서 변경 된 내용 으로 확인 해 보 셔야 할 겁니다 . 
 demun | 2013 / 11 / 04 23 : 05 + M / D Reply 
 저 는 윈도우 7 입니다 . 
 node . js 를 설치 한 후 명령 프롬프트 에서 작업 폴더 로 간 다음 npm install - g grunt 를 실행 해서 grunt 를 설치 했 습니다 . 
 그 다음 grunt init : 템플 릿 이름 이 라고 하 셧 는데 엔터 를 쳐도 아무것 도 안 나옵니다 . 
 예 를 들 어 grunt init : node 라고 입력 해도 그렇 고 , grunt init : gruntfile 라고 해도 Gruntfile 가 없 다고 나오 네요 . .... 
 순서 가 어떻게 되 는지 ? 어는 부분 이 잘못 된 건가요 ? 
 Outsider | 2013 / 11 / 05 13 : 31 + M / D 
 글 이 오래 되 서 그렇 습니다 . grunt 는 0 . 4 이후 에 구조 가 대폭 개선 되 고 init 은 별도 로 분리 되 었 습니다 . http : / / blog . outsider . ne . kr / 910 이 글 을 참고 해 주 세요 . 
 비밀 방문자 | 2015 / 07 / 16 19 : 29 + M / D Reply 
 Outsider | 2015 / 07 / 25 04 : 56 + M / D 
 안녕 하 세요 . 말씀 하 신 내용 만 으로 는 상황 을 파악 하 기 어렵 습니다 . 
 그런 트 자체 는 빌드 테스 크 를 실행 하 는 도구 일 뿐 이 고 웹 사이트 를 어떻게 빈 드 하 느냐는 설정 에 따라 다르 기 때문 에 그런 트 문제 로 보이 지 는 않 습니다 . 
 캐 싱 문제 라면 크롬 에서 도 안 나와야 한 는데 익스 8 에서 만 안 된다고 하 시 니 웹 폰트 설정 이 woff 만 되 어 있 다거나 IE 호환 성 이 안 되 거나 하 는 게 아닐 가 합니다 . 
 « Previous : 1 : ... 566 : 567 : 568 : 569 : 570 : 571 : 572 : 573 : 574 : ... 1441 : Next »