yeoman으로 web 개발환경 setting하기

yeoman을 사용하여 빠르게 웹서비스를 구성해본다라고 쓰고, 처음으로 사용해 보니 실제로는 삽질하는 경험을 기록한다. 

nodejs를 사용해 web서비스를 만들기 위해 요긴할 것 같은데 

웹페이지는 요기 : http://yeoman.io/

git페이지는 요기 : https://github.com/yeoman/generator-gulp-webapp

특징은 아래와 같다고 쓰고, 나중에 읽어본다. 

Features Please see our gulpfile for up to date information on what we support. CSS Autoprefixing Built-in preview server with BrowserSync Automagically compile Sass with libsass Automagically lint your scripts Map compiled CSS to source stylesheets with source maps Awesome image optimization Automagically wire-up dependencies installed with Bower The gulpfile makes use of ES2015 features by using Babel

사용 법은 아래와 같다고 쓰고 일단 졸라 따라한다. 

Getting Started Install dependencies: npm install --global yo gulp bower Install the generator: npm install --global generator-gulp-webapp Run yo gulp-webapp to scaffold your webapp Run gulp serve to preview and watch for changes Run bower install --save <package> to install frontend dependencies Run gulp serve:test to run the tests in the browser Run gulp to build your webapp for production Run gulp serve:dist to preview the production build

위에 2줄을 따라서 install 하고 나서 

yo gulp-webapp을 shell상에 입력하고 enter를 치면 아래와 같이 어떻게 웹을 scaffolding할지 고르라고 나온다. 

여기서 원하는 데로 선택을 하면 설치가 시작된다. 

그냥 될 줄 알았는데 나의 경우 아래와 같은 에러가 나서 잠깐 헤맸다. 

즉, 아래같은 형식의 에러인데....

bower angular-route#~1.2.15             ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/angular/bower-angular-route.git", exit code of #128 Additional error details: fatal: unable to connect to github.com: github.com[0: 192.30.252.130]: errno=Connection timed out

구글링해보니, git repository접근을 git프로토콜이 아니라 https로 하면된다고 해서 바꾸었더니 되었다. 짠~!

https://github.com/angular/angular-phonecat/issues/141

The problem was that bower tried to retrieve packages through git:// protocol, which seems to be blocked at my machine.

git config --global url."https://".insteadOf git:// solved the problem.

gulp serve를 입력하니, 짜잔 server가 떴다.