使用gulp自动化配置环境变量

时间:2022-01-26 11:20:31

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