【gulp+jq+html】添加环境变量，并在js中使用（判断环境，更改api接口域名）+ 附gulpfile.js代码

参考博文：
gulp分离环境
gulp中如何配置环境变量
gulp环境变量配置

1、安装cross-env插件

npm install cross-env -d

2、package.json更改scripts

 "scripts": {
    "clean": "gulp clean",
    "serve:test": "cross-env NODE_ENV=test gulp",
    "serve:prod": "cross-env NODE_ENV=prod gulp",
    "build:test": "cross-env NODE_ENV=test gulp",
    "build:prod": "cross-env NODE_ENV=prod gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

3、gulpfile.js中生成环境变量文件env.js

var fs = require('fs');
var env = 'test';
function set_env(type) {
  env = type || env;
  // 生成env.js文件，用于开发页面时，判断环境
  fs.writeFile("./src/assets/scripts/env.js", 'function ENV (){ return "' + env + '"};', function (err) {
    err && console.log(err);
  });
}
set_env(process.env.NODE_ENV)

生成的env.js内容：

4、在js中使用环境变量，判断api接口域名

1. 先在html中引入env.js文件（注意！！一定要在业务js之前引用）
2. 然后再在业务js中使用

const _PATH = ENV() === 'test' ? 'http://xx.xx.xxx.xx' : 'https://xxxx.xxx.com'

附gulpfile.js完整代码：

const gulp = require('gulp')
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()
const cssmin = require('gulp-cssmin')
const sass = require('gulp-sass')(require('sass'))
const autoprefixer = require('gulp-autoprefixer')
const del = require('del')
const htmlmin = require('gulp-htmlmin')
const uglify = require('gulp-uglify')
const gulpServer = require('gulp-webserver')
const browserSync = require('browser-sync');
const bs = browserSync.create();//创建一个开发服务器
const fileinclude = require('gulp-file-include');

console.log('环境变量：' + process.env.NODE_ENV)



var fs = require('fs');
var env = 'test';
function set_env(type) {
  env = type || env;
  // 生成env.js文件，用于开发页面时，判断环境
  fs.writeFile("./src/assets/scripts/env.js", 'function ENV (){ return "' + env + '"};', function (err) {
    err && console.log(err);
  });
}
set_env(process.env.NODE_ENV)


const jsHandler = () => {
  return gulp
    .src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ["@babel/env"] })) //preset-env
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
}
const jsHandler2 = () => {
  return gulp
    .src('src/assets/scripts/other/*.js', { base: 'src' })
    .pipe(gulp.dest('dist'))
}

const element = () => {
  return gulp
    .src('src/assets/element/**', { base: 'src' })
    .pipe(gulp.dest('dist'))
}

const fileincludeHandler = () => {
  return gulp
    .src('src/*.html')
    .pipe(fileinclude({
      prefix: '@@',//变量前缀 @@include
      basepath: './src/partials',//引用文件路径
      indent: true//保留文件的缩进
    }))
    .pipe(gulp.dest('dist'))
}

const cssHandler = () => {
  return gulp
    .src('./src/**/*.css', { base: 'src' })
    .pipe(autoprefixer())//自动添加前缀 autoprefixer
    .pipe(cssmin())
    .pipe(gulp.dest('./dist'))
}

const sassHandler = () => {
  return gulp
    .src('./src/**/*.scss', { base: 'src' })
    .pipe(sass())//转成css
    .pipe(autoprefixer())//自动添加前缀 autoprefixer
    .pipe(cssmin())
    .pipe(gulp.dest('./dist'))
}

const htmlHandler = () => {
  return gulp
    .src('./src/**/*.html')
    .pipe(htmlmin({
      collapseInlineTagWhitespace: true
    }))
    .pipe(gulp.dest('dist'))
}

const publicHandler = () => {
  return gulp.src('public/**', { base: 'public' })
    .pipe(gulp.dest('dist'))
}

const imagesHandler = () => {
  return gulp.src('src/assets/images/**', { base: 'src' })
    // .pipe(plugins.imagemin())
    .pipe(gulp.dest('./dist'))
}

const fontsHandler = () => {
  return gulp.src('src/assets/fonts/**', { base: 'src' })
    // .pipe(plugins.imagemin())
    .pipe(gulp.dest('./dist'))
}

const clean = () => {
  return del(['dist', 'release'])
}

const webHandler = () => {
  bs.init({
    notify: false,//唤醒浏览器后右上角落的提示
    open: false,//是否自动打开
    // port: 2000,//自定义端口, 默认3000
    livereload: true,
    files: 'dist/**',//监听哪些文件发生了变化
    server: {
      // baseDir: 'dist',//基础目录
      baseDir: ['dist', 'src', 'public'],//dist下找到会到src, public下寻找
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
  gulp.watch('./src/**/*.scss', sassHandler)
  gulp.watch('./src/**/*.js', jsHandler)
  gulp.watch('./src/**/*.html', gulp.series(htmlHandler, fileincludeHandler))
}

module.exports.default = gulp.series(
  clean,
  gulp.parallel(cssHandler, sassHandler, htmlHandler, jsHandler, jsHandler2, publicHandler, element, imagesHandler, fontsHandler),
  fileincludeHandler,
  webHandler,
)
module.exports.cssHandler = cssHandler
module.exports.sassHandler = sassHandler
module.exports.htmlHandler = htmlHandler
module.exports.jsHandler = jsHandler
module.exports.jsHandler2 = jsHandler2
module.exports.clean = clean
module.exports.webHandler = webHandler
module.exports.publicHandler = publicHandler
module.exports.element = element
module.exports.fileincludeHandler = fileincludeHandler