크리에이티브 커먼즈 라이선스
Creative Commons License

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


(이상)

저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요



티스토리 툴바