搭建支付宝小程序前端自动化构建工具--切换打包不同开发环境

使用工具的必要性:

一个完整的项目,一般有四种环境:开发环境,测试环境,预发环境,生产环境,对与前端开发来说,一个好的切换环境的方法可以提高我们的代码可读性和安全性.常见的切换环境的方法可能是这样的

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