관리 메뉴

세줄코딩

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

Programming language/Angularjs(1.x)

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

개발 hello-world 2017.01.24 17:37

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/

'Programming language > Angularjs(1.x)' 카테고리의 다른 글

Module.config / Module.constant / Module.run  (0) 2017.01.24
angular toastr  (0) 2017.01.24
yeoman gulp설정 - generator-yo-gulp / gulp-ng-config/  (0) 2017.01.24
ui-router 대강 정리  (1) 2017.01.20
angularjs 에서 Service/Factory  (0) 2016.10.18
gulp 설정  (0) 2016.04.20
0 Comments
댓글쓰기 폼