[ionic] gulp-replace를 통해 Environment Variables 설정하기

개발 환경별로 url 를 바꿔 사용해야할때나, 환경별로 소셜로그인키 값들을 관리할 때 사용할 수 있다.

• gulp 가 실행될 수 있도록 설치를 해놓는다.

1. gulpfile.js 를 수정한다. (포스팅 하단에 gulpfile.js 코드 참고)
2. root 에 config 폴더를 만들고 그 아래에 {{개발환경}}.json 파일을 만들고, url 이나 필요한 값을 넣어준다.

3. www/js/constants.js.gulp 파일을 만든다.

4. 콘솔창에서 gulp gulp-replace — env {{개발환경}} 을 입력한다.

ex)gulp gulp-replace — env development

이때 gulp 관련된 파일들이 설치가 안되어 있다는 에러가나면 에러가 나는 것들을 설치해준다.

ex) install gulp-replace — save-dev

5. 위의 명령어를 실행하면 www/js/constans.js 파일이 개발환경에서 선언해놓은대로 만들어진다.

마지막으로 apiUrl 값을 확인해본다.

참고 url : http://geekindulgence.com/environment-variables-in-angularjs-and-ionic/

//gulpfile.js

var gulp = require(‘gulp’);
var gutil = require(‘gulp-util’);
var bower = require(‘bower’);
var concat = require(‘gulp-concat’);
var sass = require(‘gulp-sass’);
var minifyCss = require(‘gulp-minify-css’);
var sh = require(‘shelljs’);
var replace = require(‘gulp-replace-task’);
var args = require(‘yargs’).argv;
var fs = require(‘fs’);
var dest = require(‘gulp-dest’);
var rename = require(“gulp-rename”);

var paths = {
sass: [‘./scss/**/*.scss’],
gulp: [‘./www/**/*.gulp’]
};

gulp.task(‘default’, [‘sass’, ‘gulp-replace’]);

gulp.task(‘sass’, function(done) {
gulp.src(‘./scss/ionic.app.scss’)
.pipe(sass())
.pipe(gulp.dest(‘./www/css/’))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: ‘.min.css’ }))
.pipe(gulp.dest(‘./www/css/’))
.on(‘end’, done);
});

gulp.task(‘watch’, function() {
gulp.watch(paths.sass, [‘sass’]);
gulp.watch(paths.gulp, [‘gulp-replace’]);
});

gulp.task(‘install’, [‘git-check’], function() {
return bower.commands.install()
.on(‘log’, function(data) {
gutil.log(‘bower’, gutil.colors.cyan(data.id), data.message);
});
});

gulp.task(‘git-check’, function(done) {
if (!sh.which(‘git’)) {
console.log(
‘ ‘ + gutil.colors.red(‘Git is not installed.’),
‘\n Git, the version control system, is required to download Ionic.’,
‘\n Download git here:’, gutil.colors.cyan(‘http://git-scm.com/downloads') + ‘.’,
‘\n Once git is installed, run \’’ + gutil.colors.cyan(‘gulp install’) + ‘\’ again.’
);
process.exit(1);
}
done();
});

gulp.task(‘gulp-replace’, function () {
// Get the environment from the command line
var env = args.env || process.env.TARGET_ENV || ‘development’;

// Read the settings from the right file
var filename = env + ‘.json’;
var settings = JSON.parse(fs.readFileSync(‘./config/’ + filename, ‘utf8’));

patterns = [];

for(key in settings) {
patterns.push({
match: key,
replacement: settings[key]
})
}

// Replace each placeholder with the correct value for the variable.
gulp.src(paths.gulp)
.pipe(replace({
patterns: patterns
}))
.pipe(rename({
extname: “”
}))
.pipe(gulp.dest(‘./www’));
});