【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接口域名

先在html中引入env.js文件（注意！！一定要在业务js之前引用）
然后再在业务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: '@@',//变量前缀 @@includebasepath: './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,//自定义端口, 默认3000livereload: 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