gulp区分生产和测试环境_glup 打包区分测试-CSDN博客

本文链接：https://blog.csdn.net/weixin_49015558/article/details/132831704

在前端项目中，可以通过在HTML文件中进行条件判断来区分生产和测试环境，然后引入不同的SDK。下面给出一个简单的思路和实现的代码示例。

\1. 在项目的根目录下创建一个配置文件，例如 config.js，内容如下：

javascript

window.env = {  isProduction: false, // 设置为 true 表示生产环境，false 表示测试环境 };

\2. 在 gulpfile.js 文件中添加任务，读取配置文件并注入到需要的 HTML 文件中：

在下面的代码中，假设我们从 config.js 文件中读取环境变量，并使用 config.environment 属性来判断当前环境是开发环境还是生产环境。根据不同的环境，我们使用条件语句来引入不同的 SDK。

注意，你需要将 https://sdk.dev.js 和 https://sdk.prod.js 替换为真实的 SDK 路径。这些路径可以根据你的实际需求进行更改。

javascript

const gulp = require('gulp'); 
const fs = require('fs'); 
const cheerio = require('cheerio'); 

gulp.task('inject-env', () => {  
    const config = require('./config.js');   
    // 读取 HTML 文件  
    return gulp.src('src/index.html')   
    .pipe(cheerio(function ($) {    
        // 注入环境变量到 HTML 文件    
        $('body').append(`<script>window.env = ${JSON.stringify(config)};</script>`);   
    }))   
    .pipe(gulp.dest('dist')); 
});


gulp.task('inject-env', () => {
   const config = require('./config.js');
  
   // 读取 HTML 文件
   return gulp.src('src/index.html')
  
   .pipe(cheerio(function ($) {
  
     // 注入环境变量到 HTML 文件
     $('body').append(`<script>window.env = ${JSON.stringify(config)};</script>`);

     // 根据环境变量引入不同的 SDK
     if (config.environment === 'development') {
        $('body').append(`<script src="https://sdk.dev.js"></script>`);
     } else if (config.environment === 'production') {
        $('body').append(`<script src="https://sdk.prod.js"></script>`);
     }
   }))
  
   .pipe(gulp.dest('dist'));
});

\3. 使用 Gulp 执行该任务：

bash

gulp inject-env

\4. 在 index.html 文件中根据环境变量来引入不同的 SDK：

html

<!DOCTYPE html> 
<html> 
    <head>  
        <meta charset="UTF-8">  
        <title>My App</title> 
    </head> 
    <body>  
        <!-- 其他内容 -->   
        <!-- 根据环境变量引入不同的 SDK -->  
        <script src="https://cdn.example.com/sdk.prod.js" type="text/javascript"></script>  
        <script src="https://cdn.example.com/sdk.test.js" type="text/javascript"></script> 
    </body> 
</html>

\5. 在 JavaScript 代码中可以使用 window.env.isProduction 来判断当前环境：

javascript

if (window.env.isProduction) {  
    // 在生产环境下执行的逻辑 
} else {  
    // 在测试环境下执行的逻辑 
}

这样，在打包时根据不同的环境变量配置，打包工具会自动将测试或生产环境的配置信息注入到 HTML 文件中，从而引入不同的 SDK。

注意：以上只是一个简单的示例，实际项目中可能需要更复杂的配置和处理。