yeoman: HTML App 스캐폴딩 툴

출처: http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=76470&sca=HTML

 

여맨 - HTML App을 만들때 아주 딱 귀찮은 일은 다 해주는 툴입니다. 

-. 제가 말씀드리는 HTML App이란 JavaScript MVC Library로 브라우저에서 Request가 일어나면, 아니면 페이지를 방문하면 JavaScript 제일먼저 실행되고 init된 routing 룰을 따라 특정 부분 혹은 전체 페이지를 JavaScript로 랜더링 해 주는 그런 앱을 말합니다. 브라우저는 주로 RestFul API를 제공 서비스와 통신하구요. 

여맨을 설치하고 yeoman init 을 치면 이런 HTML APP의 디렉토리 구조와 App에서 사용할 JavaScript 라이브러리를 대화형 콘솔로 선택해서 셋업할 수 있습니다. 일일히 디렉토리, 파일 안만드셔두 되고요. 그리고 컴파일, Lint 배포할때 버전관리도 할 수 있는 Build도 지원합니다. 빵빵하죠 ㅋ.. 


예를들어 backbone.js 기반으로 된 프로젝을 시작한다면.. 

$ yeoman init backbone  <-- Y 몇번 누르고.. 디렉 구조 완성 
$ yeoman search jquery <-- 설치할 jquery 플러그인 검색 
$ yeoman install jquery.validation  <-- 플러그인 설치 
$ yeoman build  <-- 템플릿 컴파일하고 css 나 javaScript minified 하고 dist 버전으로 압축, 이미지 optimization 자동으로 실행, HTML 파일로 embed된 jabaScript 교체.. 
$ yeoman server <-- 3501포트 열어서 현재 개발중인 HTML APP 띄워줍니다. (파일시스템으로 열거나 별도로 apache같은 거 로컬로 돌릴 필요 없이. 그리고 파일이 변동 알아서 브라우저가 refresh 해 줍니다. 배포버전은 yeoman server:dist 
$ yeoman init backbone:model cars <--  car model javaScript Templet을 만들어 줌. 


쉽게말해 php framework 에서 cli command 만들어 module에 controller 파일 추가하고 그런거 세팅해주는 것이죠. 근데 여맨은 지원하는 것 디게 많다는 것, 

$ yeoman init --help 
Running "init:yeoman" (init) task 
This task will create one or more files in the current directory, based on the 
environment and the answers to a few questions. Note that answering "?" to any 
question will show question-specific help and answering "none" to most questions 
will leave its value blank. 

"yeoman" template notes: 



Usage: yeoman generate GENERATOR [args] [options] 

General options: 
  -h, --help    # Print generator's options and usage 

Please choose a generator below. 

Yeoman: 
  generator 

Angular: 
  angular:all 
  angular:app 
  angular:common 
  angular:controller 
  angular:directive 
  angular:filter 
  angular:route 
  angular:service 
  angular:view 

Backbone: 
  backbone:all 
  backbone:app 
  backbone:collection 
  backbone:model 
  backbone:router 
  backbone:view 

Bbb: 
  bbb:all 

Chromeapp: 
  chromeapp:all 

Ember-starter: 
  ember-starter:all 

Ember: 
  ember:all 
  ember:app 
  ember:controller 
  ember:model 
  ember:view 

Mocha: 
  mocha:generator 

Quickstart: 
  quickstart:all 

Testacular: 
  testacular:app 


JavaScript Framework 학습용으로도 좋을것 같네요.