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






    2. 파일 추가하기 



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

    테스트 코드는 어디에?

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






    yo angular:controller main
    yo angular:filter number






    3. 라이브러리 추가하기


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

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

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

    버전관리해야하나?






    bower install moment







    4. 서버는 어떻게?


    static web server 실행

    ip 설정은?

    port는?

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




    grunt-contrib-connect

    grunt-connect-proxy






    5. f5 F5 F5 ...


    파일 수정하고

    저장하고

    브라우져 열고

    새로고침하고

    반복하고.. 






    watch & livereload







    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







    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을 사용하자

    deck

    By ChungSub Kim

    deck

    • 1,444