使用工具的必要性:
一个完整的项目,一般有四种环境:开发环境,测试环境,预发环境,生产环境,对与前端开发来说,一个好的切换环境的方法可以提高我们的代码可读性和安全性.常见的切换环境的方法可能是这样的
var url='https://dev.com'
//var url='https://test.com'
//var url='https://pre.com'
//var url='https://prod.com'
我们在全局声明请求路径的变量,然后使用哪种环境把其他的环境的代码注释掉.这种手动切换方式虽然简单,但是有很大的弊端:如果项目所起的服务有多个,或者使用了域名发散的方式导致请求的域名有多个,我们在手动切换环境的时候很容易出错,如果切换生产环境时,小手一抖,多了一个注释或者少了一个注释,对我们来说都是不可挽回的.因此我们希望可以通过输入一个命令行,就可以帮我们切换不同的环境.
设计思路:
想要通过命令行切换不同的环境,首先要解决的就是命令行如何更改文件内容,使用fs读写文件,成本太大,因此想到了把不同环境的请求路径写在不同的配置文件内,通过命令行,动态的导出为一个固定的配置文件,小程序内引入导出的配置文件.这样,当我们使用命令行改变了小程序内引入的配置文件时,开发环境就发生变化了.
如图所示:
如何实现:
gulp的dest导出方法和rename刚好满足了上面方案所需的技术点.这里以两个环境举例实现:
创建dev环境配置文件gulpfile.dev.js
const config={
url:'https://dev.com',
others....
}
创建test环境配置文件gulpfile.test.js
const config={
url:'https://test.com',
others....
}
创建index.js引入,定义开发方式
const DEV='./gulpfile.dev.js' //dev环境配置文件路径
const TEST='.gulpfile.test.js' //test环境配置文件路径
const DIST='./dist' //输出环境
const config={
dev:DEV,
test:TEST,
dist:DIST
}
module.exports=config
创建gulpfile.js文件,写任务执行输出操作
var gulp =require('gulp');
var config=require('./index.js');
var rename=require('gulp-rename');
//创建dev任务
gulp.task('dev',done=>{
gulp.src(config.dev) //找到dev环境配置文件路径
.pipe(rename(function(path){
path.basename='config' //文件重命名为config
}))
.pipe(gulp.dest(config.dist)) //在输出文件夹输出
done();
})
gulp.task('dev',done=>{
gulp.src(config.dev) //找到dev环境配置文件路径
.pipe(rename(function(path){
path.basename='config' //文件重命名为config
}))
.pipe(gulp.dest(config.dist)) //在输出文件夹输出
done();
})
在支付宝小程序内引入输出文件
const config=require('./dist/config.js') //引入输出的文件
在App内使用
path:config.url
至此,我们已经完成了通过命令行来实现环境的切换了,如果我们想使用less写acss,html写axml或者想压缩图片,js,css我们可以再扩展gulpfile.js的任务.具体方法请见gulp的简单使用,如何配置一个可以用html+less/sass写微信小程序的项目.
注:以上方法同样适用于微信小程序.
总结知识查漏补缺,如有错误或者不足欢迎指正补充,在此多谢.
代码地址:https://gitee.com/728/gulp-applet-demo.git