JavaScript 빌드 도구(build tool) 동향 요약
스캐폴딩(scaffolding) 기능을 중심으로...
보일러플레이트(boilerplate) 도구
- 보일러플레이트는 코드 재사용을 위해 코드 골격을 미리 구성해 놓은 것
백본 보일러플레이트(backbone boilerplate)
- Backbone.js 프레임워크를 이용하는 프로젝트를 위한 보일러플레이트
- 소스 위치: https://github.com/tbranyen/backbone-boilerplate
- 다른 백본 보일러플레이트도 있지만 이 프로젝트가 제일 좋음 (스스로 좋다고 주장함)
- requireJS를 잘 지원
- 라이브러리 소스를 있는 그대로 (변형하지 않고) 사용
- 빌드 시스템을 구비
- 샘플 앱을 지원
- 필요한 골격만 지원
스캐폴딩
- 스캐폴딩은 MVC f/w 특히 RoR(루비 온 레일즈)에서 널리 사용되기 시작함
- 어플리케이션 구축에 필요한 뼈대를 자동 생성해주는 기능
- 기본 파일과 디렉토리 구조를 매번 새로 만들어야 하는 번거로움을 제거
grunt
- grunt는 node.js 기반의 JavaScript 빌드 도구
- 설치방법: node.js가 설치된 상태에서 npm install 명령을 이용 설치
- node.js는 이제 JavaScript 실행환경일 뿐 아니라 훌륭한 개발환경
- package.json 파일에 grunt 실행에 필요한 모듈 서술
- 프로젝트 root에 두며 소스 버전 관리 대상
- npm install 명령을 실행하면 필요한 모듈이 자동 설치됨 ( 다시 말하지만, node.js는 이제 훌륭한 개발환경! )
- npm init 명령으로 기본적인 package.json 파일을 생성함
- gruntfile.js 파일에 일괄 처리할 작업을 정의
- make 시스템의 makefile에 해당
- grunt 0.3.x 버전에서는 gurnt.js로 통용됨
- grunt 0.4.x 버전에서 gruntfile.js로 이름 변경됨
- 프로젝트 root에 두며 소스 버전 관리 대상
- grunt plugin이 package.json에 들어 있고,
npm install 명령으로 설치됐다면,
gruntfile로 쉽게 실행시킬 수 있음
- pkg 섹션
- pakcage.json을 가리키는 역할
- package.json에는 프로젝트 관련 메타데이터가 정의됨
- pkg.name 같은 형태로 메타데이터 참조가 가능
- meta 섹션
- 내부 속성으로 banner만 있음
- 합치거나 축약할 때, js 파일 상단에 자동으로 넣는 주석 지정
- lint 섹션
- JSHint를 이용 JavaScript 파일 테스트
- 테스트할 파일 목록을 자유롭게 grouping하여 지정 가능
- qunit 섹션
- jQuery의 테스트 프레임워크인 QUnit을 이용 테스트 수행할 대상 파일을 지정
- PhantomJS가 설치되어 있어야 함
- lint 섹션처럼 테스트할 파일 목록을 자유롭게 지정 가능
- concat/ min 섹션
- 파일을 합치거나(concat), 공백을 제거해서 축약(min)시키는 작업을 실행
- watch 섹션
- 지정된 파일이 변경될 경우, 지정된 작업을 수행
- jshint 섹션
- lint 섹션을 실행할 때, JSHint 툴에 전달할 옵션 정의
- 실행 섹션이 아님
- uglify
- min 섹션을 실행할 때, UglifyJS 툴에 전달할 옵션 정의
- 실행 섹션이 아님
grunt-bbb
- grunt-bbb는 grunt의 플러그인
- bbb는 Backbone Boilerplate Build를 뜻함
- npm install -g bbb 명령으로 설치 ( 다시 말해 node.js는 이제 정말 훌륭한 개발환경! )
- 사용 명령어
- init (bbb)
- bare boilerplate 프로젝트 생성
- init:module (bbb)
- 새로운 모듈 생성
- model, collection, view를 통합하는 module 생성
- js, css, html 생성
- server (bbb)
- 웹서버를 띄워 프로젝트를 실행
Reference
- http://blog.outsider.ne.kr/892
- https://github.com/tbranyen/backbone-boilerplate/wiki/Getting-started-overview
- https://github.com/tbranyen/backbone-boilerplate/wiki/Installation
- http://gruntjs.com/
- https://github.com/backbone-boilerplate/grunt-bbb
