概述

某些项目使用 jenkins 做自动构建，一份代码可能会部署到多个环境，如：正式环境、UAT 环境，运维不可能每次都去手动改变我们的代码，所以，就需要前端可以针对不同的部署环境进行构建配置。

本方案使用的是 gulp-preprocess 插件，该插件可以构建一个可配置的上下文供我们在构建文件时使用。

官方的教程仅仅提供了一个简单的例子，我们实际的需求往往比较复杂，我们大致拆分为三个步骤来使用这个插件，配置 - 代码支持 - 调用传参。

配置

首先，安装所需的插件。

$ yarn add gulp-preprocess --dev

我们预设三种发布环境：

development 开发测试环境
production 正式环境
uat 客户验收测试环境

调用插件并进行简单的配置，这里，我们只需要传入一个运行环境的参数即可。

const gulp = require('gulp');
const preprocess = require('gulp-preprocess');

// 定义一个任务
gulp.task('script', function() {
  return gulp.src('src/**/*.js')
  .pipe(preprocess({
    context: {
      // 此处可接受来自调用命令的 NODE_ENV 参数，默认为 development 开发测试环境
      NODE_ENV: process.env.NODE_ENV || 'development',
    },
  }))
  .pipe(gulp.dest('/dist'))
});

代码支持

修改我们的业务代码，时期能够根据不同的环境输出不同的内容。

// src/test.js
var publicjs = {
  // @if NODE_ENV = 'development'
  env: '开发测试环境',
  // @endif
  // @if NODE_ENV = 'production'
  env: '正式环境',
  // @endif
  // @if NODE_ENV = 'uat'
  env: '客户验收测试环境',
  // @endif
};

我们使用【注解】的方式做了修改，这样一来，只要上下文中的 NODE_ENV 有对应的选项，就可以正确的输出预期的结果。

在终端中运行我们的代码：

$ set NODE_ENV=production&&gulp script

查看编译后的代码；

// dist/test.js
var publicjs = {
  env: '正式环境',
};

代码可正常运行。

调用传参

set NODE_ENV=production&&gulp script 这一大串命令还是比较难以输入的，我们把它简化为 npm 命令：

首先，在项目的 package.json 中修改 script 属性：

{
  "name": "test",
  "version": "0.0.1",
  "scripts": {
    "dev": "gulp",
    "build_dev": "gulp script",
    "build_pro": "set NODE_ENV=production&&gulp script",
    "build_uat": "set NODE_ENV=uat&&gulp script"
  },
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-preprocess": "^3.0.1",
  }
}