Yeoman

1. ㈜유미테크
Yeoman
(Front-End 개발을 도와주는
자동화 도구)

2. ㈜유미테크2㈜유미테크 Yeoman
1. Yeoman 이란?
2. Yeoman Generator
3. Bower
4. Grunt
5. Angular JS Example
 목차

3. ㈜유미테크3㈜유미테크 Yeoman
1. Yeoman 이란?

4. ㈜유미테크4㈜유미테크 Yeoman
 Yeoman 이란?
– Front-End 개발을 도와주는 자동화 도구.
– Scaffolding 도구.
 Yeoman 구성
– Yo
– Bower
– Grunt
1. Yeoman 이란?

5. ㈜유미테크5㈜유미테크 Yeoman
 기본 설치
– Node.JS (http://nodejs.org/)
– Ruby (https://www.ruby-lang.org/)
– Git (http://git-scm.com/)
– compass (http://compass-style.org/)
1. Yeoman 이란?

6. ㈜유미테크6㈜유미테크 Yeoman
1. Yeoman 이란?
› npm install –g yo

7. ㈜유미테크7㈜유미테크 Yeoman
2. Yeoman Generator

8. ㈜유미테크8㈜유미테크 Yeoman
 Scaffolding 생성 기
 Generator 종류
– generator-bootstrap (Twitter Bootstrap)
– generator-backbone (Backbone.js)
– generator-angular (AngularJS)
– generator-ember (Ember.js)
 직접 만들어서 사용 가능.
 http://yeoman.io/official-generators.html
2. Yeoman Generator

9. ㈜유미테크9㈜유미테크 Yeoman
 Generator 사용 예.
2. Yeoman Generator
› npm install –g generator-angular
› yo angular

10. ㈜유미테크10㈜유미테크 Yeoman
3. Bower

11. ㈜유미테크11㈜유미테크 Yeoman
 트위터에서 개발
 스크립트 라이브러리의 버전 관리
 환경파일 : bower.json
 라이브러리 설치 위치정보 : .bowerrc
3. Bower

12. ㈜유미테크12㈜유미테크 Yeoman
 bower.json
3. Bower
{
"name": "mytodo",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.15",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.11.0",
"bootstrap": "~3.0.3"
},
"devDependencies": {
"angular-mocks": "1.2.15",
"angular-scenario": "1.2.15"
}
}

13. ㈜유미테크13㈜유미테크 Yeoman
 .bowerrc
3. Bower
{
"directory": "app/bower_components“
}

14. ㈜유미테크14㈜유미테크 Yeoman
3. Bower
› npm install –g bower
› bower install jquery

15. ㈜유미테크15㈜유미테크 Yeoman
4. Grunt

16. ㈜유미테크16㈜유미테크 Yeoman
 자바스크립트 빌드 도구
 다양한 플러그인을 통해 기능을 첨부, 확장 가능
http://gruntjs.com/plugins
 환경파일 : Gruntfile.js
 기본적으로 사용되는 플러그인은 node_modules 폴더에 자동 설치
4. Grunt

17. ㈜유미테크17㈜유미테크 Yeoman
4. Grunt
› npm install –g grunt-cli
› grunt build
› grunt server

18. ㈜유미테크18㈜유미테크 Yeoman
4. Grunt

19. ㈜유미테크19㈜유미테크 Yeoman
5. AngularJS Example

20. ㈜유미테크20㈜유미테크 Yeoman
1) yo, bower, grunt 설치
5. AngularJS Example

21. ㈜유미테크21㈜유미테크 Yeoman
2) angular generator 설치
5. AngularJS Example

22. ㈜유미테크22㈜유미테크 Yeoman
3) Project 생성
5. AngularJS Example

23. ㈜유미테크23㈜유미테크 Yeoman
4) Project 폴더 확인
5. AngularJS Example

24. ㈜유미테크24㈜유미테크 Yeoman
4) Grunt를 이용해서 확인
5. AngularJS Example