使用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']);
});