블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

'yeoman-generator'에 해당되는 글 2건

  1. 2013.04.25 [Yeoman] 자신만의 Generator 만들기 - 1
  2. 2013.04.22 [Yeoman] generator-angular 와 Express.js 연동하기
2013. 4. 25. 11:45 Dev Environment/Build System

[Yeoman] 자신만의 Generator 만들기 - 1

구글 플러스 보다가 여맨 개발자인 오스마니님의 Generator 문서 정리했다는 글을 보고 얼른 들어와 봤다. AngularJS를 하면서 Yeoman을 필수로 상요하고 있어서 필요한 모듈이나 라이브러리를 스케폴딩하도록 수정하고 있기 때문에 어째 잘 정리되었는지 살펴본다 



1. 소개

  - 제너레이터의 종류는 두가지이다 

    + Boilerplate : 프로젝트 껍데기를 만들어준다. 프로젝트 구조화에 도움 예) HTML5 boilerplate, Twitter Bootstrap boilerplate 등 

    + Scaffolder : boilerplate외에 빌드시스템, sub-generator, 의존성관리, 자동화 업무수행(workflow)을 한다 

  - 공식적인 제너레이터들을 사용하거나 fork해서 수정 사용해도 된다 예) AngularJS+Express 연동



2. Boilerplate  Generator 만들기 

  - awesome 이란 걸 만들어 보자 

    + 원문은 사실 왜 이렇게 명령을 하는지 친절하게 설명은 하지 않고 있다. 기본은 알고 있다는 전제로 간단히 설명했다 

    + html5 boilerplate generator를 만들어 본다 

///////////////////////////////////////////////////////

// yeoman의  boilerplate generator를 가장 먼저 클론한다

$ git clone git://github.com/addyosmani/generator-boilerplate.git

Cloning into 'generator-boilerplate'...

.. 중략..

Resolving deltas: 100% (20/20), done.


///////////////////////////////////////////////////////

// git submodule add 명령(참조) 을 통하여 html5 bp 클론

// 여기서 중요한 것은 app/templates 으로 반드시 지정

// app/templates은 yeoman의 복제 템플릿이 놓이는 위치

// 다른 방법 : yo boilerplate https://github.com/h5bp/html5-boilerplate/archive/master.tar.gz

$ cd generator-boilerplate/

$ generator-boilerplate> git submodule add git://github.com/h5bp/html5-boilerplate.git app/templates

Cloning into 'app/templates'...

remote: Counting objects: 4955, done.

..중략...

warning: LF will be replaced by CRLF in .gitmodules.

The file will have its original line endings in your working directory.


///////////////////////////////////////////////////////

// templates 밑으로 html5-boilerplate 코드가 들어감

$ tree

.

├── README.md

├── app

│   ├── index.js

│   └── templates

│       ├── 404.html

│       ├── CHANGELOG.md

│       ├── CONTRIBUTING.md

│       ├── LICENSE.md

│       ├── README.md

│       ├── apple-touch-icon-114x114-precomposed.png

│       ├── apple-touch-icon-144x144-precomposed.png

│       ├── apple-touch-icon-57x57-precomposed.png

│       ├── apple-touch-icon-72x72-precomposed.png

│       ├── apple-touch-icon-precomposed.png

│       ├── apple-touch-icon.png

│       ├── crossdomain.xml

│       ├── css

│       │   ├── main.css

│       │   └── normalize.css

│       ├── doc

│       │   ├── TOC.md

│       │   ├── crossdomain.md

│       │   ├── css.md

│       │   ├── extend.md

│       │   ├── faq.md

│       │   ├── html.md

│       │   ├── js.md

│       │   ├── misc.md

│       │   └── usage.md

│       ├── favicon.ico

│       ├── humans.txt

│       ├── img

│       ├── index.html

│       ├── js

│       │   ├── main.js

│       │   ├── plugins.js

│       │   └── vendor

│       │       ├── jquery-1.9.1.min.js

│       │       └── modernizr-2.6.2.min.js

│       └── robots.txt

└── package.json


7 directories, 34 files


///////////////////////////////////////////////////////

// git 상태정보 .gitmodule 모듈 환경파일 자동 생성됨 

$ git status

warning: LF will be replaced by CRLF in .gitmodules.

The file will have its original line endings in your working directory.

# On branch master

# Changes to be committed:

#   (use "git reset HEAD <file>..." to unstage)

#

# modified:   .gitmodules

# new file:   app/templates

#


$ cat .gitmodules

[submodule "app/templates"]

path = app/templates

url = git://github.com/h5bp/html5-boilerplate.git


$ cat .git/config

[core]

repositoryformatversion = 0

filemode = true

bare = false

logallrefupdates = true

ignorecase = true

precomposeunicode = false

[remote "origin"]

url = git://github.com/addyosmani/generator-boilerplate.git

fetch = +refs/heads/*:refs/remotes/origin/*

[branch "master"]

remote = origin

merge = refs/heads/master

[submodule "app/templates"]

url = git://github.com/h5bp/html5-boilerplate.git


///////////////////////////////////////////////////////

// Node.js는 기본 설치되어 있어야 한다

// node package manager를 통하여 yeoman관련 모듈설치

$ npm install


  - 원문에서 다음으로 자신이 원하는 프로젝트를 만들라고 하는데, 중간과정이 생략되었다. 이제 만든 generator-boilerplate  사용법을 보자 

///////////////////////////////////////////////////////

// awesome이라는 명칭으로 변경한다

// yeoman 명명규칙으로 generator- prefix는 꼭 붙인다

// package.json 과 README.md 파일 내역을 수정한다 

$ mv generator-boilerplate generator-awesome

$ cd generator-awesome

$ vi package-json  // 이름과 버전 및 설명을 수정

$ vi README.md   // 내용 수정


///////////////////////////////////////////////////////

// yo 명령은 node를 기반으로 한다. 

// 따라서 global하게 찾을 수 있게 node_modules 밑에

// symbolic link을 걸어주었다

$ cd /usr/local/lib/node_modules

$ sudo ln -s <Your Directory Full Path>/generator-awesome  generator-awesome

Password:

/usr/local/lib/node_modules> ls -alrt

 ..중략..

drwxr-xr-x  13 nobody  staff   442  4 12 13:45 generator-karma

drwxr-xr-x  18 nobody  staff   612  4 12 14:30 npm

drwxr-xr-x  15 nobody  staff   510  4 12 14:31 bower

drwxr-xr-x  13 nobody  staff   442  4 12 15:03 grunt-cli

drwxr-xr-x   7 nobody  staff   238  4 18 09:57 yo

drwxr-xr-x  26 nobody  staff   884  4 18 10:42 generator-angular

drwxr-xr-x  16 nobody  staff   544  4 18 16:59 grunt-init

drwxr-xr-x  10 nobody  staff   340  4 19 23:46 grunt-express

drwxr-xr-x  16 nobody  staff   544  4 19 23:46 grunt

drwxr-xr-x  16 nobody  staff   544  4 22 11:04 generator-express

drwxr-xr-x  14 nobody  staff   476  4 22 11:31 generator-generator

drwxr-xr-x  13 nobody  staff   442  4 22 11:44 generator-bootstrap

lrwxr-xr-x   1 root    wheel    48  4 22 17:08 generator-angular-sd -> /Users/development/generator-angular-sd

drwxr-xr-x  16 nobody  staff   544  4 24 15:15 jshint

lrwxr-xr-x   1 root    wheel    52  4 25 10:40 generator-awesome -> /Users/prototyping/yeoman/generator-awesome


$ yo -h

Please choose a generator below.

Awesome

  awesome:app


///////////////////////////////////////////////////////

// 자신의 프로젝트 디렉토리를 만든다 

// 프로젝트 디렉토리로 이동하여 yo awesome 수행! 

$ mkdir  dowonProject 

$ cd dowonProject

$  yo awesome  (또는 yo awesome:app)

Generating from Generator Boilerplate v0.1.4...

   create .gitattributes

 .. 중략 ..

   create js/vendor/jquery-1.9.1.min.js

   create js/vendor/modernizr-2.6.2.min.js

   create robots.txt



3. Scaffolding Generator 만들기 

  - generator-generator 를 사용하여 만든다 

///////////////////////////////////////////////////////

// 사실 yo, bower, grunt-cli를 설치해야 한다 (참조)

// 스케폴딩 제너레이터를 만들어 주는 제너레이터 설치

$ sudo npm install -g yo

$ sudo npm install -g generator-generator


///////////////////////////////////////////////////////

// 사용할 수 있는 yeoman generator list를 보자 

$ yo -h 

Generator

  generator

  generator:app

  generator:subgenerator


///////////////////////////////////////////////////////

// 스케폴딩 제너레이터 디렉토리를 만들고 명령수행

// generator- 는 반드시 붙인다. 뒤에 오는 이름에는 

// 절대로 - 를 사용하지 않는다. underbar 사용함!

$ mkdir generator-angularjs_express

$ cd generator-angularjs-express

$ yo generator:app

     _-----_

    |       |

    |--(o)--|   .--------------------------.

   `---------´  |    Welcome to Yeoman,    |

    ( _´U`_ )   |   ladies and gentlemen!  |

    /___A___\   '__________________________'

     |  ~  |

   __'.___.'__

 ´   `  |° ´ Y `


Would you mind telling me your username on Github? (someuser) ysyun

What's the base name of your generator? (generator-angularjs_express)

   create package.json

   create .editorconfig

   ..중략..

   create app/templates/_component.json

npm http GET https://registry.npmjs.org/yeoman-generator


/////////////////////////////////////////////////////////////////

// app 밑으로 index.js 파일과 templates 폴더 생성

// yo 는 generator 밑의 폴더(여기선 app하나) 밑에 기본

// index.js 를 찾고 해당 파일을 수행한다 

// 즉, app가 있으므로 향후 명령은 yo angularjs-express:app 가 된다 

//

// mocha와 yeoman-generator가 설치됨

$ tree

.

├── LICENSE

├── README.md

├── app

│   ├── index.js

│   └── templates

│       ├── _component.json

│       ├── _package.json

│       ├── editorconfig

│       ├── jshintrc

│       └── travis.yml

├── node_modules

│   ├── mocha

│   └── yeoman-generator

├── package.json

└── test

    ├── test-creation.js

    └── test-load.js


/////////////////////////////////////////////////////////////////

// app이외의 다른 generator를 만들고 싶다면 subgenerator 이용

$ yo generator:subgenerator dowon

   create dowon/index.js

   create dowon/templates/somefile.js


$ cat index.js

'use strict';

var util = require('util');

var yeoman = require('yeoman-generator');


var DowonGenerator = module.exports = function DowonGenerator(args, options, config) {

  // By calling `NamedBase` here, we get the argument to the subgenerator call

  // as `this.name`.

  yeoman.generators.NamedBase.apply(this, arguments);


  console.log('You called the dowon subgenerator with the argument ' + this.name + '.');

};


util.inherits(DowonGenerator, yeoman.generators.NamedBase);


DowonGenerator.prototype.files = function files() {

  this.copy('somefile.js', 'somefile.js');

};


/////////////////////////////////////////////////////////////////

// angularjs-express라고 만든 Scaffoliding generator 사용하기 

/usr/local/lib/node_modules> sudo ln -s <your full path>/generator-angularjs_express generator-angularjs_express

/usr/local/lib/node_modules> yo -h


Angularjs_express

  angularjs_express:app

  angularjs_express:dowon


////////////////////////////////

// 이제 명령어를 사용할 수 있다

$ yo angularjs_express:app 또는 dowon


다음에는 index.js 확장하는 방법을 알아보자 



<참조> 

  - 원문 : http://yeoman.io/generators.html

저작자표시 비영리 변경금지

'Dev Environment > Build System' 카테고리의 다른 글

[Gulp] Live reload 환경 만들기  (0) 2017.04.04
[Yeoman] generator-angular 와 Express.js 연동하기  (0) 2013.04.22
[Yeoman] AngularJS 개발환경 자동 구성하기  (3) 2013.04.15
[Grunt] Grunt API 활용 - Task 만들기  (0) 2013.01.31
[Grunt] Javascript code using Grunt.js  (0) 2013.01.28
posted by 윤영식
2013. 4. 22. 23:42 Dev Environment/Build System

[Yeoman] generator-angular 와 Express.js 연동하기

Yeoman은 generator-* 를 통하여 스케폴딩 코드 껍데기를 만들어준다. 이중 angular를 위해서 generator-angular와 테스트를 위한 generator-karma등 다양한 generator가 있고, 사용자가 원하는 generator를 만들 수가 있다. generator-angular안에는 클라이언트단만을 고려한 스케폴딩만 존하여 generator-angular를 GitHub에서 forking하여 ExpressJS를 붙여 프로젝트에 실제 필요한 스케폴딩을 만들어 본다



1) generator-angular forking

  - https://github.com/yeoman/generator-angular 에서 fork를 했다


  - 로컬로 복제한다 

    + git clone https://github.com/ysyun/generator-angular 

  - yeoman 1.0 beta 부터는 명령이 yo 로 바뀌었다. 포스팅 보고서 설치를 한다

  - yo 로 수행할 수 있는 generator 목록을 보자 

    + 만일 generator-angular 를 설치했다면 Angular 라고 나온다

    + Naming convention 규칙에 따라서 generator-[Name] 으로 generator가 만들어지고 [Name]만을 취한다

    + generator들은 npm install -g 옵션으로 설치하여 맥(Mac) 기준으로 /usr/local/lib/node_modules/* 밑에 설치된다 

$ yo --help

 Usage: yo GENERATOR [args] [options]


General options:

  -h, --help     # Print generator's options and usage

  -f, --force    # Overwrite files that already exist


Please choose a generator below.


Angular  <<=== generator-angular 

  angular:app

  angular:common

  angular:controller

  angular:directive

  angular:filter

  angular:main

  angular:route

  angular:service

  angular:view


Bootstrap

  bootstrap:app


Express

  express:app

  express:basic

  express:common


Generator

  generator

  generator:app

  generator:subgenerator


Karma

  karma:app


Mocha

  mocha:app

  mocha:generator


Webapp

  webapp:app


$ cd /usr/local/lib/node_modules && ls -alrt

drwxr-xr-x  13 nobody  staff   442  4 12 13:45 generator-karma

drwxr-xr-x  18 nobody  staff   612  4 12 14:30 npm

drwxr-xr-x  15 nobody  staff   510  4 12 14:31 bower

drwxr-xr-x  13 nobody  staff   442  4 12 15:03 grunt-cli

drwxr-xr-x   7 nobody  staff   238  4 18 09:57 yo

drwxr-xr-x  26 nobody  staff   884  4 18 10:42 generator-angular

drwxr-xr-x  16 nobody  staff   544  4 18 16:59 grunt-init

drwxr-xr-x  10 nobody  staff   340  4 19 23:46 grunt-express

drwxr-xr-x  16 nobody  staff   544  4 19 23:46 grunt

drwxr-xr-x  12 nobody  staff   408  4 22 10:20 coffee-script

drwxr-xr-x  16 nobody  staff   544  4 22 11:04 generator-express

drwxr-xr-x  14 nobody  staff   476  4 22 11:31 generator-generator

drwxr-xr-x  13 nobody  staff   442  4 22 11:44 generator-bootstrap

drwxr-xr-x  29 root    wheel   986  4 22 15:53 generator-angular_dowon

lrwxr-xr-x   1 root    wheel    48  4 22 17:08 generator-angular-sd -> /Users/nulpulum/development/generator-angular-sd


  - fork한 generator-angular를 로컬머신에서 generator-angular-sd 라는 별도 디렉토리에 받고, /usr/local/lib/node_modules/밑에 symbolic link 를 걸어주었다. 

  - 다시 yo --help를 해보면 하기와 같이 angular-sd가 나온다.

    + 앞으로 명령을 yo angular-sd:app 또는 yo angular-sd:express 명령을 치면 스케폴딩 소스가 생기는 것이다. 

Angular-sd

  angular-sd:app

  angular-sd:common

  angular-sd:controller

  angular-sd:directive

  angular-sd:express  <<=== 만들 대상 

  angular-sd:filter

  angular-sd:main

  angular-sd:route

  angular-sd:service

  angular-sd:view



2) Angular Express Generator 만들기 

  - https://github.com/hmalphettes/yeoman-angular-express-example  샘플을 참조해서 작성을 시도해 보았다 

  - 일단 Yeoman 스케폴딩 방식에 대해서 알아보자 (Yeoman Wiki 설명문)

    + Yeoman은 디렉토리별로 index.js 파일을 기본으로 참조한다 

    + 디폴트 디렉토리는 app 이다

    + 그렇다면 다음과 같은 구조가 될 것이다. 즉, yo --help 했을 때 최상위 generator-angular-sd 밑의 디렉토리명이 옵션이 된다

    + 초기 generator를 만드는 도구는 npm install -g generator-generator로 설치한다 (직접 만들고 싶다면 설치,우선 참조만)

angular-sd/

    app/index.js

    common/index.js

    controller/index.js

    ... 중략 ...

    view/index.js


  - yo angular-sd:express 를 수행하려면  generator-angular-sd/express/  디렉토리를 만들고, index.js를 만든다

    + 코드는 yeoman-generator 를 사용한다 

    + 파란색 부분이 중요하다. 모든 스케폴딩 코드 템플릿을 generator-angular-sd/templates/ 밑에 관리하는 것이 일반적이다

    + templates 디렉토리 밑에 express 디렉토리를 만든다  

// index.js

'use strict';

var path = require('path');

var util = require('util');

var yeoman = require('yeoman-generator');


module.exports = ExpressGenerator;


function ExpressGenerator() {

  yeoman.generators.Base.apply(this, arguments);

}


util.inherits(ExpressGenerator, yeoman.generators.Base);


ExpressGenerator.prototype.setupEnv = function setupEnv() {

  this.sourceRoot(path.join(__dirname, '../templates/express'));

  this.directory('.', '.', true);

};


  - templates/express/ 디렉토리 밑에 express 관련 views, routes, public 등을 놓아도 되지만 여기서는 app.js 만들 놓는다. 

    + yo angular-sd를 먼저 수행하면 app 디렉토리가 express의 public 정적 디렉토리 파일 역할을 해준다. 

    + Angular를 사용한다는 것은 SPA이기 때문에 index.html 하나만 두고 전부 partial html로 사용할 것이다.

    + 따라서 Express의 jade는 사용하지 않을 것이다. app.js 파일 하나만 만듦

    + 정적 파일 디렉토리를 app로 지정하고, '/' 요청은 '/app/index.html'로 보냄. index.html 은 angular 파일이다 

var express = require('express')

  , routes = require('./server/routes')

  , http = require('http')

  , path = require('path')

  , fs = require('fs');


var app = express();


app.configure(function(){

  app.set('port', process.env.PORT || 3000);

  // angular /app/views

  // app.set('views', __dirname + '/server/views');

  // app.set('view engine', 'jade');

  app.use(express.favicon());

  app.use(express.logger('dev'));

  app.use(express.bodyParser());

  app.use(express.methodOverride());

  app.use(app.router);

  // angular app == public dir

  app.use(express.static(path.join(__dirname, 'app')));

});


app.configure('development', function(){

  app.use(express.errorHandler());

});


app.get('/', function(req, res) {

  res.sendfile(__dirname + '/app/index.html');

});

// app.get('/', routes.index);

// app.get('/users', user.list);


http.createServer(app).listen(app.get('port'), function(){

  console.log("Express server listening on port " + app.get('port'));


  - package.json 내역에 express 포함시킴 

    + 스케폴딩 위치는 generator-angular-sd/templates/common 밑에 package.json 파일이 존재한다 (수정할 파일)

    + package.json의 내역을 참조하여 node_modules에 필요 모듈을 다운로드 한다 

    + 맨 마지막에 fork 하였던 https://github.com/ysyun/generator-angular 을 travis ci에 연동하기 위해 scripts{ test:...} 넣음

    + grunt express-server를 위하여 grunt-express를 넣음 

{

  "name": "anulgar-express",

  "description": "Grunt task for running an Express Server for Smart Dashboard",

  "homepage": "http://mobincon.tistory.com",

  "author": {

    "name": "Yun Young Sik",

    "email": "ysyun@yuwin.co.kr"

  },

  "repository": {

    "type": "git",

    "url": "https://github.com/ysyun/generator-angular"

  },

  "version": "0.0.1",

  "scripts": {

    "test": "grunt travis --verbose"

  },

  "dependencies": {

    "express": "~3.2.0",

    "jade": "~0.29.0"

  },

  "devDependencies": {

    "grunt": "~0.4.1",

    "grunt-contrib-copy": "~0.4.0",

    "grunt-contrib-concat": "~0.1.3",

    "grunt-contrib-coffee": "~0.6.4",

    "grunt-contrib-uglify": "~0.2.0",

    "grunt-contrib-compass": "~0.1.3",

    "grunt-contrib-jshint": "~0.3.0",

    "grunt-contrib-cssmin": "~0.5.0",

    "grunt-contrib-connect": "~0.2.0",

    "grunt-contrib-clean": "~0.4.0",

    "grunt-contrib-htmlmin": "~0.1.1",

    "grunt-contrib-imagemin": "~0.1.2",

    "grunt-contrib-livereload": "~0.1.2",

    "grunt-bower-requirejs": "~0.4.1",

    "grunt-usemin": "~0.1.10",

    "grunt-regarde": "~0.1.1",

    "grunt-rev": "~0.1.0",

    "grunt-karma": "~0.3.0",

    "grunt-open": "~0.2.0",

    "matchdep": "~0.1.1",

    "grunt-google-cdn": "~0.1.1",

    "grunt-ngmin": "~0.0.2",

    "grunt-express": "git://github.com/hmalphettes/grunt-express.git",

    "socket.io": "*"

  },

  "engines": {

    "node": ">=0.8.0"

  }

}


  - 명령을 수행해 본다

    + yo angular-sd  : angular-sd:app 와 동일하고 generator-angular-sd/app/index.js 설정한 내역을 수행한다 

    + yo angular-sd:express : express 관련 파일을 스케폴딩한다. 초기에 jade도 넣었다가 그냥 app.js 만 놔두었다 

$ mkdir angular-express

$ cd angular-express

$ yo angular-sd

  ... 쭉 엔터치고 한참 의존관계있는 파일을 받는다 ...

$ ls -alrt

drwxr-xr-x   4 nulpulum  staff   136  4 22 23:15 ..

drwxr-xr-x   4 nulpulum  staff   136  4 22 23:16 test

-rw-r--r--   1 nulpulum  staff  1491  4 22 23:16 package.json

-rw-r--r--   1 nulpulum  staff  1273  4 22 23:16 karma.conf.js

-rw-r--r--   1 nulpulum  staff  1134  4 22 23:16 karma-e2e.conf.js

-rw-r--r--   1 nulpulum  staff   360  4 22 23:16 component.json

-rw-r--r--   1 nulpulum  staff  8189  4 22 23:16 Gruntfile.js

-rw-r--r--   1 nulpulum  staff   409  4 22 23:16 .jshintrc

-rw-r--r--   1 nulpulum  staff    50  4 22 23:16 .gitignore

-rw-r--r--   1 nulpulum  staff    11  4 22 23:16 .gitattributes

-rw-r--r--   1 nulpulum  staff   415  4 22 23:16 .editorconfig

-rw-r--r--   1 nulpulum  staff    38  4 22 23:16 .bowerrc

drwxr-xr-x  12 nulpulum  staff   408  4 22 23:16 app

drwxr-xr-x  15 nulpulum  staff   510  4 22 23:16 .

drwxr-xr-x  30 nulpulum  staff  1020  4 22 23:17 node_modules


$ yo angular-sd:express

   create app.js



3) Grunt file 만들기

  - Express에 대해서 grunt를 통하여 test, build, preview를 수행하기 위하여 Gruntfile.js를 수정한다

     + generator-angular-sd/templates/common/Gruntfile.js 가 수정파일이다 

     + package.json 파일 에서  "grunt-express": "git://github.com/hmalphettes/grunt-express.git" 꼭 들어가야 함

  - Gruntfile.js : 기존 generator-angular의 Gruntfile.js에서 express 관련 내역을 첨부한다 (파일참조)

'use strict';

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;

var mountFolder = function (connect, dir) {

  return connect.static(require('path').resolve(dir));

};

var path = require('path');


module.exports = function (grunt) {

  // load all grunt tasks

  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);


  // configurable paths

  var yeomanConfig = {

    app: 'app',

    dist: 'dist',

    server: 'server'

  };


  try {

    yeomanConfig.app = require('./component.json').appPath || yeomanConfig.app;

  } catch (e) {}


  grunt.initConfig({

    yeoman: yeomanConfig,

    watch: {

      coffee: {

        files: ['<%%= yeoman.app %>/scripts/{,*/}*.coffee'],

        tasks: ['coffee:dist']

      },

      coffeeTest: {

        files: ['test/spec/{,*/}*.coffee'],

        tasks: ['coffee:test']

      },

      compass: {

        files: ['<%%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],

        tasks: ['compass']

      },

      livereload: {

        files: [

          '<%%= yeoman.app %>/{,*/}*.html',

          '{.tmp,<%%= yeoman.app %>}/styles/{,*/}*.css',

          '{.tmp,<%%= yeoman.app %>}/scripts/{,*/}*.js',

          '<%%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',

          '<%%= yeoman.server %>'

        ],

        tasks: ['livereload']

"Gruntfile.js" [dos] 349L, 8192C

        ],

        tasks: ['livereload']

      }

    },

    connect: {

      options: {

        port: 9000,

        // Change this to '0.0.0.0' to access the server from outside.

        hostname: 'localhost'

      },

      livereload: {

        options: {

          middleware: function (connect) {

            return [

              lrSnippet,

              mountFolder(connect, '.tmp'),

              mountFolder(connect, yeomanConfig.app)

            ];

          }

        }

      },

      test: {

        options: {

          middleware: function (connect) {

            return [

              mountFolder(connect, '.tmp'),

              mountFolder(connect, 'test')

            ];

          }

        }

      }

    },

    express: {

      livereload: {

        options: {

          port: 9000,

          bases: [ path.resolve('.tmp'), path.resolve(yeomanConfig.app) ],

          monitor: {},

          debug: true //,

          // server: path.resolve('/app')

        }

      },

      test: {

        options: {

          port: 9000,

          bases: [ path.resolve('.tmp'), path.resolve(yeomanConfig.app) ],

          port: 9000,

          bases: [ path.resolve('.tmp'), path.resolve(yeomanConfig.app) ],

          monitor: {},

          debug: true //,

          // server: path.resolve('/app')

        }

      }

    },


  ... 중략 ...

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



  // for express

  grunt.registerTask('express-server', [

    'clean:server',

    'coffee:dist',

    'compass:server',

    'livereload-start',

    'express:livereload',

    'open',

    'watch'

  ]);


  grunt.registerTask('express-test', [

    'clean:server',

    'coffee',

    'compass',

    'connect:test',

    'karma'

  ]);


  grunt.registerTask('travis', ['jshint', 'test']);


  - 명령 수행하기 

    + grunt express-test : 테스트 

    + grunt : 빌드

    + grunt express-server : 미리보기 수행


    + 명령을 수행하면 자동으로 브라우져가 뜨면 성공



모든 것이 성공했다면 Remote Repository로 push한다. 그리고 Travis-ci에 forking한 프로젝트를 연결한다. 해당 부분은 다음에 보도록 하자.


결과물 : https://github.com/ysyun/generator-angular



<참조>

  - Travis CI 연동하기

  - 2013.11 Monthly Digest for Yeoman

  - Yeoman : generator-fullstack with angular and express

  - Yeoman : generator-mean with angular and express, mongodb, node

저작자표시 비영리 변경금지

'Dev Environment > Build System' 카테고리의 다른 글

[Gulp] Live reload 환경 만들기  (0) 2017.04.04
[Yeoman] 자신만의 Generator 만들기 - 1  (0) 2013.04.25
[Yeoman] AngularJS 개발환경 자동 구성하기  (3) 2013.04.15
[Grunt] Grunt API 활용 - Task 만들기  (0) 2013.01.31
[Grunt] Javascript code using Grunt.js  (0) 2013.01.28
posted by 윤영식
prev 1 next

티스토리툴바