Frontend 자동화 도구
- Yeoman
- scaffolding tool
- 조력, 발판
- 초기 단계에 적절한 도움을 통한 작업시간 단축
- web appliication 개발 전에 필요한 디렉토리 구조 및 기본적인 파일 생성
- 목적에 따라 다르게 구조를 잡아준다
- bootstrap app => bootstrap generator
- angular js => angular generator
- install
- npm(window, linux)
- node.js, ruby 의존성 때문에 설치 필요
- // compass를 설치합니다. sass 컴파일 시 필요합니다.
$ gem install compass
// Yeoman을 설치합니다.
$ npm install -g yo
- generator에 따라 bower.json 자동 생성
- bower을 사용하여 의존 컴포넌트를 자동으로 받아 scaffoling 생성
- 추가 컴포넌트 필요시 bower.json에 추가 후 다시 install
- scaffolding에 맞는 기본 Guntfile.js 자동 생성
- 추가 task, 변경 필요한 task 존재시 yeoman이 생성한 gruntfile.js에 추가 or 수정
- scaffolding tool
- Bower(http://bower.io)
- component 의존성 관리
- npm, brew 비슷
- 라이브러리 파일을 형상관리 하지 않아도 됨
- Grunt, Gulp
- Grunt(http://gruntjs-kr.herokuapp.com)
- 자바스크립트 프로젝트를 위한 task 기반의 CLI(command line interface build too)
- task – static file(js, css, html) concat, miniflcation
- node.js에서 할수 있는 모느것을 프로젝트에 적용 가능
- 반복되는 작업을 Gruntflie.js를 작성하여 자동 빌드, 배포
- node.js 기반, 필수, npm으로 global로 설치해야함
- grunt는 script파일인 Gruntfile.js를 참고하여 수행
- 자바스크립트 프로젝트를 위한 task 기반의 CLI(command line interface build too)
- Gulp
- 플러그인을 연결해서 사용
- node 스럽다.
- 작은 모듈이 많고 이를 조합해서 테스크를 만든다.
- 코드로 테스크를 선언
- Grunt(http://gruntjs-kr.herokuapp.com)
참고
http://javarouka.github.io/pt/yeoman
http://mobicon.tistory.com/402
http://e-rooms.tistory.com/entry/프론트-엔드-웹-개발을-위한-빌드-시스템Grunt-Yeoman-Bower
https://blog.outsider.ne.kr/1181?category=20