Why Yeoman?



TEDxPURPLEWORKS
April 3, 2014

    why?

                             Scaffolding   /  Build/Test/Util   /  Package Management

    web



    html
    +
    javascript
    +
    css

    webapp



    html
    +
    javascript
    +
    css
    +
    ?

    COMPLEXITY



    복잡 ㅠㅠ

    ...


    해결책은?

    TOOL


    for

    Productivity

    &

    Satisfaction

    1. 프로젝트 만들기



    처음 프로젝트 시작을 어떻게 할까요?

    디렉토리는 어떻게 구성할지?

    설정파일같은건 어떻게 할지?

    프로그램은 뭘 설치할지?






    yo angular





    http://yeoman.io/community-generators.html


    2. 파일 추가하기 



    추가되는 파일은 어디에 넣지?

    테스트 코드는 어디에?

    스크립트 참조 코드는 어떻게 하지?






    yo angular:controller main
    yo angular:filter number





    https://github.com/yeoman/generator-angular


    3. 라이브러리 추가하기


    최신버전을 다운받아서 적용했는데

    새버전이 나오면 어떻게 추가하지?

    라이브러리 용량이 너무 큰데

    버전관리해야하나?






    bower install moment






    http://bower.io/search/


    4. 서버는 어떻게?


    static web server 실행

    ip 설정은?

    port는?

    업로드파일은 로컬에 없는데?




    grunt-contrib-connect

    grunt-connect-proxy





    https://github.com/gruntjs/grunt-contrib-connect
    https://github.com/drewzboto/grunt-connect-proxy


    5. f5 F5 F5 ...


    파일 수정하고

    저장하고

    브라우져 열고

    새로고침하고

    반복하고.. 






    watch & livereload






    https://github.com/gruntjs/grunt-contrib-watch


    6. scss

    css
    body .wrapper .title {  color:#333;
    } 
    body .wrapper .desc {  color:#777;
    } 
    
    scss
    body {  .wrapper {    .title { color:#333; }    .desc { color:#333; }
    } }






    grunt-contrib-compass






    https://github.com/gruntjs/grunt-contrib-compass


    7. dist


    불필요한 띄어쓰기나 필요없는 주석 삭제
    V
    이미지 파일은 메타 정보 삭제하고 용량 최적화
    V
    여러개의 파일보다는 하나의 파일
    V
    캐시적용으로 다시 다운받지 않게
    V
    필요한 부분 문자열 수정하기


    grunt-contrib-cssmin
    grunt-contrib-htmlmin
    grunt-contrib-imagemin
    grunt-contrib-uglify
    grunt-ngmin

    grunt-contrib-concat

    grunt-rev

    grunt-replace



    8. test


    unit test?

    E2E test?

    어떻게?

    설정은?





    grunt-karma
    karma-jasmine
    karma-xxx
    grunt-protractor-runner

    9. more..


    bower install 귀차나..

    grunt-bower-task

    결론





    tool을 사용하자
    Made with Slides.com