使用gulp自動化配置環境變量

使用gulp拷貝文件，可以完成開發api環境變量的配置，例如公司的線上環境有三個:

1.alpha線上測試環境

2.dev線上測試環境

3.test 本地測試環境

(4.production 正式系統環境)

各個環境的apIhost不一樣，在開發中每次更改url會很不方便，所以用到gulp可以完成環境變量的配置。

在git ignore文件中忽略gulp生成的文件夾 /.test/(我的文件夾名為test即本地測試系統)

使用gulp拷貝文件夾不改變文件目錄和路徑有兩個方法：

1.給gulp.src添加一個base選項即：gulp.src('文件名',{base:'.'});

2。在src中使用通配符例如：

test*/文件名。

return gulp.src(['!console/environment.js','assets*/**/*','console*/**/*','weixin*/*','images*/*'])

 

Gulp使用node-glob來從你指定的glob里面獲取文件，這里列舉下面的例子來闡述，方便理解：

• js/app.js 精確匹配文件
• js/*.js 僅匹配js目錄下的所有后綴為.js的文件
• js/**/*.js 匹配js目錄及其子目錄下所有后綴為.js的文件
• !js/app.js 從匹配結果中排除js/app.js，這種方法在你想要匹配除了特殊文件之外的所有文件時非常管用
• *.+(js|css) 匹配根目錄下所有后綴為.js或者.css的文件

gulp使用的過程中涉及代碼：

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
browserSync = require('browser-sync'),
preprocess = require('gulp-preprocess'),
watch = require('gulp-watch'),
concat = require('gulp-concat');

var floder_dev ='dev',
floder_test='test',
floder_alpha = 'alpha',
floder_production = 'production';

gulp.task('api-dev',function () {
return gulp.src('console/environment.js')
.pipe(preprocess({
context:{
apiUrl :'http://www.baidu',
}
}))
.pipe(gulp.dest(floder_dev+'/console'));
});

gulp.task('api-test',function () {
return gulp.src('console/environment.js')
.pipe(preprocess({
context:{
apiUrl :'http://10.10.17.1.32/',
}
}))
.pipe(gulp.dest(floder_test+'/console'));
});

gulp.task('api-alpha',function () {
return gulp.src('console/environment.js')
.pipe(preprocess({
context:{
apiUrl :'http://www.yexu.dd/',
}
}))
.pipe(gulp.dest(floder_alpha+'/console'));
});
gulp.task('html-dev',function () {
return gulp.src(['!console/environment.js','assets*/**/*','console*/**/*','weixin*/*','images*/*'])
.pipe(gulp.dest(floder_dev))
});

gulp.task('html-test',function () {
return gulp.src(['!console/environment.js','assets*/**/*','console*/**/*','weixin*/*','images*/*'])
.pipe(gulp.dest(floder_test))
});

gulp.task('html-alpha',function () {
return gulp.src(['!console/environment.js','assets*/**/*','console*/**/*','weixin*/*','images*/*'])
.pipe(gulp.dest(floder_alpha))
});

gulp.task('profile-dev',['html-dev','api-dev'], function(){
return gulp.src('index.html')
.pipe(gulp.dest(floder_dev));
});

gulp.task('profile-test',['html-test','api-test'], function(){
return gulp.src('index.html')
.pipe(gulp.dest(floder_test));
});

gulp.task('profile-alpha',['html-alpha','api-alpha'], function(){
return gulp.src('index.html')
.pipe(gulp.dest(floder_alpha));
});

gulp.task('dev',function(){
gulp.watch(['console/**/*'], ['profile-test']);
});