yeoman gulp설정 - generator-yo-gulp / gulp-ng-config/

yeoman gulp의 스캣폴딩과 개발환경 설정.

yeoman / gulp / bower 전역 설치. 

npm install -g yo gulp bower

yeoman gulp 설정. 

( yo --generators 라고 터미널에 입력하면 전역으로 설치된 generator들의 목록을 살펴 볼 수 있으니 

이미 설치되었는지 확인해 보자. )

1.  gulp-angular 전역 설치 ( 터미널에 입력 )

npm install -g generator-gulp-angular

2. 프로젝트 폴더 만들고 해당 폴더로 이동 ( 터미널에 입력 )

mkdir my-new-project && cd $_

3. 전역으로 설치된 generator-gulp-angular를 gulp-angular 명령어로 로컬 폴더에 설치 ( 터미널에 입력 )

yo gulp-angular

해당 주소:https://github.com/swiip/generator-gulp-angular#readme

gulp angular 개발 설정. 

터미널에서( 경로는 프로젝트 폴더여야 함) 아래 명령어로 gulp-ng-config를 설치.

--> npm install gulp-ng-config 

1. src>app폴더에 config.json 이라고 파일 생성

2. 아래와 같은 내용을 config.json에 입력 아래에서 속성명은 어떠한 것으로 바꾸어도 상관없다.

{
  "local": {
    "Env": { 
      "API": "http://localhost:8888/api"
    }
  },
  "production": {
    "Env": {
      "API": "http://myproduction.com/api"
    }
  }
}

3. gulp 폴더안에 server.js/build.js 열어서 아래처럼 파일경로 설정.

var gulpNgConfig = require('gulp-ng-config');

4. 자동으로 config.js 생성시켜줄 task작성. 

( 아래 내용처럼 task가 config는 local 개발 환경/ config:build는 production 배포개발환경 )

AuthURL.config는 사용자가 지정할 수 있는 모듈명이다. 

gulp.task('config', function () {
  gulp.src(path.join(conf.paths.src, '/app/config.json'))
      .pipe(gulpNgConfig('AuthURL.config', {
        environment: 'local'
      }))
      .pipe(gulp.dest(path.join(conf.paths.src, '/app/')))
});

gulp.task('config:build', function () {
  gulp.src(path.join(conf.paths.src, '/app/config.json'))
      .pipe(gulpNgConfig('AuthURL.config', {
        environment: 'production'
      }))
      .pipe(gulp.dest(path.join(conf.paths.src, '/app/')))
});


gulp.task('build', ['config:build','html', 'fonts', 'other']);

5. serve.js 를 열어 개발 설정도 지정. ( task의 2번째 인자배열에 config와 config:build만 입력했다. )

gulp.task('serve', ['config','watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});

gulp.task('serve:dist', ['config:build', 'build'], function () {
  browserSyncInit(conf.paths.dist);
});

gulp.task('serve:e2e', ['config','inject'], function () {
  browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});

gulp.task('serve:e2e-dist', ['config:build','build'], function () {
  browserSyncInit(conf.paths.dist, []);
});

6.  터미널에서 gulp build 라고 치면

src/app폴더안에 config.js  파일이 생성된다.

파일을 열어보면 아래처럼 내용이 들어가 있다.

angular.module('AuthURL.config', [])
.constant('Env', {"API":"http://localhost:8888/api"});

gulp serve:dist 라고 터미널에서 입력했다면 아래와 같이 입력된다.

angular.module("AuthURL.config", [])
.constant("Env", {"API":"http://myproduction.com/api"});

즉 config.json에서 설정한 것처럼 local과 production 개발 환경이 gulp의 명령어로 간단히 변경된다.

참고 주소: https://github.com/ajwhite/gulp-ng-config

                   https://chyngyz.github.io/gulp-ng-config/