angular, bower, karma, grunt, yo?

업무를 하면서 정리를 하지 않으니 그냥 대충 알고 가는것 같다.

천천히 제대로 따라가자!

아래는 이번 웹프로젝트에 참여하면서 사용할 친구들이다.

단, node.js가 먼저 셋팅되어있어야 한다.(npm 등)

localhost:~ terrypark$ npm list --global -depth=0

/usr/local/lib

├── bower@1.3.12

├── generator-angular@0.9.8

├── generator-karma@0.8.3

├── grunt-cli@0.1.13

├── npm@1.4.28

└── yo@1.3.0

생소한 것들이 많다.

angular, bower, karma, grunt, yo?

하나씩 알아가보자!

참고 url : https://www.youtube.com/watch?v=QfWmtb8bntU

우리의 방향은 아래의 그림인 것 같다.

YO

- Yeoman의 일부.

템플릿 npm 모듈로 작성한다.(배포하거나 로컬에 두고 실행)

이미 다양한 템플릿이 존재.

커스트마이징 가능

영어로는

Yo is maintained by the Yeoman project and offers web application scaffolding, utilizing scaffolding templates we refer to as generators. You typically install yo and any generators you think you might use via npm. : 간단히 말해서..웹어플리케이션의 템플릿을 제공! 

설치 시에 권한 문제가 있을 수 있음! -> su root 등으로 root권한으로 해주면 됨!

npm install -g yo  

1) npm install -g generator-webapp   : Basic Scaffolding

2) npm install -g generator-angular : Scaffolding an AngularJS app

1) 또는 2) 설치! angular로 하려면 2번을 셋팅!

2)번 선택 후 project 디렉토리를 하나 만들고 그 안에서 yo angular 명령어 수행!

localhost:app terrypark$ yo angular

     _-----_

    |       |    .--------------------------.

    |--(o)--|    |    Welcome to Yeoman,    |

   `---------´   |   ladies and gentlemen!  |

    ( _´U`_ )    '--------------------------'

    /___A___\    

     |  ~  |     

   __'.___.'__   

 ´   `  |° ´ Y ` 

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? No

? Would you like to include Bootstrap? Yes

? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js

❯◉ angular-animate.js

 ◉ angular-cookies.js

 ◉ angular-resource.js

 ◉ angular-route.js

 ◉ angular-sanitize.js

 ◉ angular-touch.js

결과 - 아래와 같이 만들어집니다.

localhost:ManagerOfMoney terrypark$ ls -alr

total 88

drwxr-xr-x   5 terrypark  staff   170 11 17 11:27 test

-rw-r--r--   1 terrypark  staff   977 11 17 11:27 package.json

drwxr-xr-x  21 terrypark  staff   714 11 17 11:28 node_modules

drwxr-xr-x  15 terrypark  staff   510 11 17 11:27 bower_components

-rw-r--r--   1 terrypark  staff   488 11 17 11:27 bower.json

drwxr-xr-x  12 terrypark  staff   408 11 17 11:27 app

-rw-r--r--   1 terrypark  staff  9700 11 17 11:27 Gruntfile.js

더 직관적으로 보면

In the AngularJS framework, for example

$ yo angular:controller myController
$ yo angular:directive myDirective
$ yo angular:filter myFilter
$ yo angular:service myService

$ yo angular:controller mainController
   create app/scripts/controllers/maincontroller.js
   create test/spec/controllers/maincontroller.js

셋팅 확인은  

npm list --global -depth=0

/usr/local/lib

├── bower@1.3.12

├── generator-angular@0.9.8

├── generator-karma@0.8.3

├── grunt-cli@0.1.13

├── npm@1.4.28

└── yo@1.3.0

참고 

필수참고! : http://yeoman.io/learning/

https://www.youtube.com/watch?v=zBt2g9ekiug

https://github.com/yeoman/yo

http://twofuckingdevelopers.com/2013/07/yeoman-modern-workflows-for-angularjs/

http://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing

GRUNT

Grunt is a task-based command line build tool for JavaScript projects.’

프로젝트에 사전정의된 task 단위로 실행되며 command line을 통해 동작하는 자바스크립트 용 빌드 툴

Grunt는 JavaScript Task Runner, JavaScript 프로젝트 관리를 위한 build-tool이다

npm install -g grunt-cli

grunt serve // 서버 시작!

참고 

http://gruntjs.com/getting-started

http://nuli.navercorp.com/sharing/blog/post/1132682

KARMA

카르마는 프로젝트에서 테스트를 위함이다.

카르마를 동작시키기위해서는 node.js와 npm이 필요하다.

참고

http://karma-runner.github.io/0.12/index.html

karma install : http://karma-runner.github.io/0.12/intro/installation.html

testacular : http://www.youtube.com/watch?v=MVw8N3hTfCI

npm install -g testacular

BOWER

보우어가 하는 짓은 다음과 같다. 즉, 실제로 사용되어지는 라이브러리등을 install 하여 사용한다. 간혹 install은 되어있으나 

app.js에 자동으로 만들어지지 않을 경우가 종종 있다. 이럴경우에는 수동으로 넣어주면 된다.

ex)

   .......

   'ui.router',

    'base64'  <--수동으로 넣어주기.

  ])

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. 

Bower manages all these things for you.

npm install -g bower    // bower 설치. npm은 bower, grunt 등을 설치!

bower install <package> // bower는 위에 언급한 것처럼 frameworks, libraries등을 설치!

ex) bower install jquery 

참고

http://bower.io/

bower가 제공하는 package 찾기 : http://bower.io/search/

참고 - 개인 프로젝트 시 참고~

https://travis-ci.org/

      - 끝 -