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 수정

• 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를 참고하여 수행
  • Gulp
    • 플러그인을 연결해서 사용
    • node 스럽다.
      • 작은 모듈이 많고 이를 조합해서 테스크를 만든다.
    • 코드로 테스크를 선언

참고
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