[Yeoman] 자신만의 Generator 만들기 - 1

구글 플러스 보다가 여맨 개발자인 오스마니님의 Generator 문서 정리했다는 글을 보고 얼른 들어와 봤다. AngularJS를 하면서 Yeoman을 필수로 상요하고 있어서 필요한 모듈이나 라이브러리를 스케폴딩하도록 수정하고 있기 때문에 어째 잘 정리되었는지 살펴본다 

1. 소개

  - 제너레이터의 종류는 두가지이다 

    + Boilerplate : 프로젝트 껍데기를 만들어준다. 프로젝트 구조화에 도움 예) HTML5 boilerplate, Twitter Bootstrap boilerplate 등 

    + Scaffolder : boilerplate외에 빌드시스템, sub-generator, 의존성관리, 자동화 업무수행(workflow)을 한다 

  - 공식적인 제너레이터들을 사용하거나 fork해서 수정 사용해도 된다 예) AngularJS+Express 연동

2. Boilerplate  Generator 만들기 

  - awesome 이란 걸 만들어 보자 

    + 원문은 사실 왜 이렇게 명령을 하는지 친절하게 설명은 하지 않고 있다. 기본은 알고 있다는 전제로 간단히 설명했다 

    + html5 boilerplate generator를 만들어 본다 

///////////////////////////////////////////////////////

// yeoman의  boilerplate generator를 가장 먼저 클론한다

$ git clone git://github.com/addyosmani/generator-boilerplate.git

Cloning into 'generator-boilerplate'...

.. 중략..

Resolving deltas: 100% (20/20), done.

///////////////////////////////////////////////////////

// git submodule add 명령(참조) 을 통하여 html5 bp 클론

// 여기서 중요한 것은 app/templates 으로 반드시 지정

// app/templates은 yeoman의 복제 템플릿이 놓이는 위치

// 다른 방법 : yo boilerplate https://github.com/h5bp/html5-boilerplate/archive/master.tar.gz

$ cd generator-boilerplate/

$ generator-boilerplate> git submodule add git://github.com/h5bp/html5-boilerplate.git app/templates

Cloning into 'app/templates'...

remote: Counting objects: 4955, done.

..중략...

warning: LF will be replaced by CRLF in .gitmodules.

The file will have its original line endings in your working directory.

///////////////////////////////////////////////////////

// templates 밑으로 html5-boilerplate 코드가 들어감

$ tree

.

├── README.md

├── app

│   ├── index.js

│   └── templates

│       ├── 404.html

│       ├── CHANGELOG.md

│       ├── CONTRIBUTING.md

│       ├── LICENSE.md

│       ├── README.md

│       ├── apple-touch-icon-114x114-precomposed.png

│       ├── apple-touch-icon-144x144-precomposed.png

│       ├── apple-touch-icon-57x57-precomposed.png

│       ├── apple-touch-icon-72x72-precomposed.png

│       ├── apple-touch-icon-precomposed.png

│       ├── apple-touch-icon.png

│       ├── crossdomain.xml

│       ├── css

│       │   ├── main.css

│       │   └── normalize.css

│       ├── doc

│       │   ├── TOC.md

│       │   ├── crossdomain.md

│       │   ├── css.md

│       │   ├── extend.md

│       │   ├── faq.md

│       │   ├── html.md

│       │   ├── js.md

│       │   ├── misc.md

│       │   └── usage.md

│       ├── favicon.ico

│       ├── humans.txt

│       ├── img

│       ├── index.html

│       ├── js

│       │   ├── main.js

│       │   ├── plugins.js

│       │   └── vendor

│       │       ├── jquery-1.9.1.min.js

│       │       └── modernizr-2.6.2.min.js

│       └── robots.txt

└── package.json

7 directories, 34 files

///////////////////////////////////////////////////////

// git 상태정보 .gitmodule 모듈 환경파일 자동 생성됨 

$ git status

warning: LF will be replaced by CRLF in .gitmodules.

The file will have its original line endings in your working directory.

# On branch master

# Changes to be committed:

#   (use "git reset HEAD <file>..." to unstage)

#

# modified:   .gitmodules

# new file:   app/templates

#

$ cat .gitmodules

[submodule "app/templates"]

path = app/templates

url = git://github.com/h5bp/html5-boilerplate.git

$ cat .git/config

[core]

repositoryformatversion = 0

filemode = true

bare = false

logallrefupdates = true

ignorecase = true

precomposeunicode = false

[remote "origin"]

url = git://github.com/addyosmani/generator-boilerplate.git

fetch = +refs/heads/*:refs/remotes/origin/*

[branch "master"]

remote = origin

merge = refs/heads/master

[submodule "app/templates"]

url = git://github.com/h5bp/html5-boilerplate.git

///////////////////////////////////////////////////////

// Node.js는 기본 설치되어 있어야 한다

// node package manager를 통하여 yeoman관련 모듈설치

$ npm install

  - 원문에서 다음으로 자신이 원하는 프로젝트를 만들라고 하는데, 중간과정이 생략되었다. 이제 만든 generator-boilerplate  사용법을 보자 

///////////////////////////////////////////////////////

// awesome이라는 명칭으로 변경한다

// yeoman 명명규칙으로 generator- prefix는 꼭 붙인다

// package.json 과 README.md 파일 내역을 수정한다 

$ mv generator-boilerplate generator-awesome

$ cd generator-awesome

$ vi package-json  // 이름과 버전 및 설명을 수정

$ vi README.md   // 내용 수정

///////////////////////////////////////////////////////

// yo 명령은 node를 기반으로 한다. 

// 따라서 global하게 찾을 수 있게 node_modules 밑에

// symbolic link을 걸어주었다

$ cd /usr/local/lib/node_modules

$ sudo ln -s <Your Directory Full Path>/generator-awesome  generator-awesome

Password:

/usr/local/lib/node_modules> ls -alrt

 ..중략..

drwxr-xr-x  13 nobody  staff   442  4 12 13:45 generator-karma

drwxr-xr-x  18 nobody  staff   612  4 12 14:30 npm

drwxr-xr-x  15 nobody  staff   510  4 12 14:31 bower

drwxr-xr-x  13 nobody  staff   442  4 12 15:03 grunt-cli

drwxr-xr-x   7 nobody  staff   238  4 18 09:57 yo

drwxr-xr-x  26 nobody  staff   884  4 18 10:42 generator-angular

drwxr-xr-x  16 nobody  staff   544  4 18 16:59 grunt-init

drwxr-xr-x  10 nobody  staff   340  4 19 23:46 grunt-express

drwxr-xr-x  16 nobody  staff   544  4 19 23:46 grunt

drwxr-xr-x  16 nobody  staff   544  4 22 11:04 generator-express

drwxr-xr-x  14 nobody  staff   476  4 22 11:31 generator-generator

drwxr-xr-x  13 nobody  staff   442  4 22 11:44 generator-bootstrap

lrwxr-xr-x   1 root    wheel    48  4 22 17:08 generator-angular-sd -> /Users/development/generator-angular-sd

drwxr-xr-x  16 nobody  staff   544  4 24 15:15 jshint

lrwxr-xr-x   1 root    wheel    52  4 25 10:40 generator-awesome -> /Users/prototyping/yeoman/generator-awesome

$ yo -h

Please choose a generator below.

Awesome

  awesome:app

///////////////////////////////////////////////////////

// 자신의 프로젝트 디렉토리를 만든다 

// 프로젝트 디렉토리로 이동하여 yo awesome 수행! 

$ mkdir  dowonProject 

$ cd dowonProject

$  yo awesome  (또는 yo awesome:app)

Generating from Generator Boilerplate v0.1.4...

   create .gitattributes

 .. 중략 ..

   create js/vendor/jquery-1.9.1.min.js

   create js/vendor/modernizr-2.6.2.min.js

   create robots.txt

3. Scaffolding Generator 만들기 

  - generator-generator 를 사용하여 만든다 

///////////////////////////////////////////////////////

// 사실 yo, bower, grunt-cli를 설치해야 한다 (참조)

// 스케폴딩 제너레이터를 만들어 주는 제너레이터 설치

$ sudo npm install -g yo

$ sudo npm install -g generator-generator

///////////////////////////////////////////////////////

// 사용할 수 있는 yeoman generator list를 보자 

$ yo -h 

Generator

  generator

  generator:app

  generator:subgenerator

///////////////////////////////////////////////////////

// 스케폴딩 제너레이터 디렉토리를 만들고 명령수행

// generator- 는 반드시 붙인다. 뒤에 오는 이름에는 

// 절대로 - 를 사용하지 않는다. underbar 사용함!

$ mkdir generator-angularjs_express

$ cd generator-angularjs-express

$ yo generator:app

     _-----_

    |       |

    |--(o)--|   .--------------------------.

   `---------´  |    Welcome to Yeoman,    |

    ( _´U`_ )   |   ladies and gentlemen!  |

    /___A___\   '__________________________'

     |  ~  |

   __'.___.'__

 ´   `  |° ´ Y `

Would you mind telling me your username on Github? (someuser) ysyun

What's the base name of your generator? (generator-angularjs_express)

   create package.json

   create .editorconfig

   ..중략..

   create app/templates/_component.json

npm http GET https://registry.npmjs.org/yeoman-generator

/////////////////////////////////////////////////////////////////

// app 밑으로 index.js 파일과 templates 폴더 생성

// yo 는 generator 밑의 폴더(여기선 app하나) 밑에 기본

// index.js 를 찾고 해당 파일을 수행한다 

// 즉, app가 있으므로 향후 명령은 yo angularjs-express:app 가 된다 

//

// mocha와 yeoman-generator가 설치됨

$ tree

.

├── LICENSE

├── README.md

├── app

│   ├── index.js

│   └── templates

│       ├── _component.json

│       ├── _package.json

│       ├── editorconfig

│       ├── jshintrc

│       └── travis.yml

├── node_modules

│   ├── mocha

│   └── yeoman-generator

├── package.json

└── test

    ├── test-creation.js

    └── test-load.js

/////////////////////////////////////////////////////////////////

// app이외의 다른 generator를 만들고 싶다면 subgenerator 이용

$ yo generator:subgenerator dowon

   create dowon/index.js

   create dowon/templates/somefile.js

$ cat index.js

'use strict';

var util = require('util');

var yeoman = require('yeoman-generator');

var DowonGenerator = module.exports = function DowonGenerator(args, options, config) {

  // By calling `NamedBase` here, we get the argument to the subgenerator call

  // as `this.name`.

  yeoman.generators.NamedBase.apply(this, arguments);

  console.log('You called the dowon subgenerator with the argument ' + this.name + '.');

};

util.inherits(DowonGenerator, yeoman.generators.NamedBase);

DowonGenerator.prototype.files = function files() {

  this.copy('somefile.js', 'somefile.js');

};

/////////////////////////////////////////////////////////////////

// angularjs-express라고 만든 Scaffoliding generator 사용하기 

/usr/local/lib/node_modules> sudo ln -s <your full path>/generator-angularjs_express generator-angularjs_express

/usr/local/lib/node_modules> yo -h

Angularjs_express

  angularjs_express:app

  angularjs_express:dowon

////////////////////////////////

// 이제 명령어를 사용할 수 있다

$ yo angularjs_express:app 또는 dowon

다음에는 index.js 확장하는 방법을 알아보자 

<참조> 

  - 원문 : http://yeoman.io/generators.html