YEOMAN

Yeoman은 스캐폴딩 툴인 Yo
패키지 매니저인 Bower
빌드 도구인 Grunt 로 구성되어 있다.

Scaffolding

조력, 도움 이란 뜻. 작업자에 대해 적절한 도움을 제공함으로써 유의미한 작업을 수행할 수 있게 도움을 주는 것. (ZPD 가 생각난다!)

가정집을 만들때의 스캐폴딩과 고층 아파트의 스캐폴딩은 다르다. Bootstrap 을 사용한 앱을 만드는것과 ChromeExtension 을 만드는건, 디렉토리 구조부터 컴포넌트까지 모두 다르다.

그래서 각 App 에 맞는 Generator 를 이용해서 Scaffolding 을 만들 수 있다. 설치해보자! Node.js와 Ruby를 깔고.

npm install -g yo
gem install compass
npm install generator-webapp
yo webapp
grunt server // 개발 서버 준비
grunt // 컴파일 및 배포

Generator 목록은 여기 있다.

BOWER

Maven처럼 프로젝트의 여러 의존컴포넌트들을 간단한 설정파일로 관리할 수 있다!

bower install underscore bootstrap

라고 하면, bower_components 폴더 밑에 다운이 되고, bower.json 이 프로젝트 루트에 생성되어 의존성 정보가 저장 된다. bower.json 에 의존성 정보를 넣어두면, 의존성을 일일이 쳐 넣을 필요 없이

bower install

로 모든걸 해결! 정리하자면,

Yeoman은 제네레이터에 따라 bower.json을 자동 생성하고, bower로 의존 컴포넌트를 자동으로 받아 스캐폴딩을 생성한다. 이 외에 추가로 받을 의존성이 있다면, bower.json 에 추가하고 bower install 하면 끗!

Grunt

Grunt는 테스트, 빌드, 배포, 기타 등등 여러가지 정의된 태스크를 수행한다. (Ant 랑 비슷한건가!?!?!)

Grunt는 Node.js 를 사용해서 태스크 스크립트를 만들기 때문에, Node.js에서 할 수 있는 모든걸 할 수 있다!

Grunt는 Gruntfile.js 를 통해 태스크를 수행한다. Grunt는 Maven처럼 플러그인 기반이기 때문에 작업을 수행하려면 플러그인을 설치하고 스크립트에 수행 계획과 함께 등록해야 한다. Gruntfile.js 샘플을 보자.

'use strict';

module.exports = function (grunt) {
    // show elapsed time at the end
    require('time-grunt')(grunt);
    // load all grunt tasks
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        // configurable paths
        yeoman: {
            app: 'app',
            dist: 'dist'
        },
        htmlmin: {
            dist: {
                options: {
                },
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>',
                    src: '*.html',
                    dest: '<%= yeoman.dist %>'
                }]
            }
        }
    });

    grunt.registerTask('server', function (target) {
        if (target === 'dist') {
            return grunt.task.run(['build', 'connect:dist:keepalive']);
        }

        grunt.task.run([
            'clean:server',
            'concurrent:server',
            'autoprefixer',
            'connect:livereload',
            'watch'
        ]);
    });

    grunt.registerTask('test', [
        'clean:server',
        'concurrent:test',
        'autoprefixer',
        'connect:test',
        'mocha'
    ]);

    grunt.registerTask('build', [
        'clean:dist',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'cssmin',
        'uglify',
        'copy:dist',
        'rev',
        'usemin'
    ]);

    grunt.registerTask('default', [
        'jshint',
        'test',
        'build'
    ]);
};

좀 짜르긴 했는데 그래도 길다. yo webapp 에 기본으로 들어있는 gruntfile.js 였다. Grunt Task 작성법을 익히는것도 큰 일인데..?

Yeoman Generator 로 스캐폴딩을 생성하면! 자동으로 Gruntfile.js 가 제공된다! 우리는!

grunt // 빌드
grunt server // 로컬서버 구동

만 하면 됌!

Watch Plugin

grunt server로 서버를 수행하면, 기본적으로 watch 플러그인 때문에 실시간으로 소스가 갱신된다!?!?! 으아아 멋지다.

However

스캐폴딩 제네레이터 정의가 귀찮고, 맘에 들지 않을수도. 따라서 간단히 bower.json, Gruntfile.js, package.json 만 떼와도 된다.

참고문헌 (거의베낌) : http://www.slideshare.net/javarouka/introduce-yeoman