【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: '@@',//变量前缀 @@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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/664748.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA JDBC配置

一、在pom中添加依赖 <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33</version></dependency></dependencies> 然后同步一下 二、编写代码…

03哈希表:349、 两个数组的交集

349、 两个数组的交集 文章目录 349、 两个数组的交集方法一&#xff1a;哈希表 重点&#xff1a;题目规定了长度为1000&#xff0c;可以用数组&#xff1b;去重需要用set 哈希法&#xff1a; 从第一个里面取出来&#xff0c;放入数组&#xff0c;用第二个去查数组 方法一&…

C++项目-- 高并发内存池(一)

C项目-- 高并发内存池&#xff08;一&#xff09; 文章目录 C项目-- 高并发内存池&#xff08;一&#xff09;一、项目介绍1.项目来源2.内存池介绍1.池化技术2.内存池3.内存池主要解决的问题4.malloc 二、定长内存池1.定长内存池的设计2.代码实现3.性能测试4.直接在堆上申请空间…

【考研408】算法与数据结构笔记

文章目录 绪论数据结构的基本概念算法和算法评价 线性表线性表的定义和基本操作线性表的顺序表示线性表的链式表示 栈和队列栈基本操作栈的顺序存储结构栈的链式存储 队列队列常见的基本操作队列的顺序存储结构队列的链式存储结构双端队列 栈和队列的应用栈在括号匹配中的应用栈…

【内置对象·js】

数学对象 document.write("圆周率为 " Math.PI "<br>");日期对象 var date new Date(); // 实例化 Date 对象var month date.getMonth() 1; // 获取月份&#xff0c;取值为 0&#xff08;一月&#xff09;到 11&#xff08;十二月&#xff09;之…

SQL注入:sqli-labs靶场通关(1-37关)

SQL注入系列文章&#xff1a; 初识SQL注入-CSDN博客 SQL注入&#xff1a;联合查询的三个绕过技巧-CSDN博客 SQL注入&#xff1a;报错注入-CSDN博客 SQL注入&#xff1a;盲注-CSDN博客 SQL注入&#xff1a;二次注入-CSDN博客 ​SQL注入&#xff1a;order by注入-CSDN博客 …

【Go语言成长之路】安装Go

文章目录 安装Go一、下载Go语言安装包二、删除以前安装的Go版本三、添加/usr/local/go/bin到环境变量内四、确认安装成功 安装Go Note: 这里只演示安装Linux版本的Go&#xff0c;若为其它版本&#xff0c;请按照官网的安装教程进行安装即可。 一、下载Go语言安装包 ​ 在浏览…

【IM】长连接网关设计探索(一)

目录 1.长连接网关的必要性2. 设计目标2.1 技术挑战2.2 技术目标 3. 方案选型3.1 网关IP地址的选择3.1.1 使用httpDNS服务3.1.2 自建http server作为IP config server3.1.3 最佳方案 3.2 高并发收发设计3.2.1 C10K问题3.2.2 方案探索双协程监听channel实现全双工 一个定时器 1…

99 C++内存高级话题。new/delete的进一步认识 整理

1. new 初始化的整理。 class Teacher120 { public:Teacher120() {cout << "teacher120 moren 构造函数" << endl;}Teacher120(int age):m_age(m_age) {cout << "teacher120 构造函数" << endl;}~Teacher120() {cout << &qu…

科普类—— 双目视觉系统在无人驾驶汽车中的安装位置(四)

科普类—— 双目视觉系统在无人驾驶汽车中的安装位置&#xff08;四&#xff09; 在无人驾驶汽车中&#xff0c;双目视觉系统的安装位置和两个相机之间的安装间距&#xff08;基线&#xff09;对于系统的性能至关重要。这些参数的选择需要基于工程数据和实际应用需求来确定。以…

【搜索术】代码阅读理解学习笔记

学习资料 《理解源代码》 1 静态阅读 1.1 目标结构 常见目录名含义docs项目文档examples示例代码

服务器托管的作用是什么?

服务器托管是将企业的服务器和相关设备托管到具有完善机房设施、高品质网络环境与运营经验的网络数据中心内&#xff0c;服务器托管在维护方面一般是由客户负责的&#xff0c;或者是由其他的授权人进行远程维护。 那服务器托管的作用都有哪些呢&#xff1f; 服务器托管不需要企…

数组练习题

知识点 数组 题目1 请创建一个长度为6的整数数组&#xff0c;并为数组中的元素赋值。遍历数组&#xff0c;打印所有元素&#xff0c;元素之间用空格隔开。比如&#xff1a; 数组为&#xff1a;{1,2,3,4,5} 打印结果&#xff1a;1 2 3 4 5 训练提示 1、数组中的元素有索引…

hivesql的基础知识点

目录 一、各数据类型的基础知识点 1.1 数值类型 整数 小数 float double(常用) decimal(针对高精度) 1.2 日期类型 date datetime timestamp time year 1.3 字符串类型 char varchar / varchar2 blob /text tinyblob / tinytext mediumblob / mediumtext lon…

CentOS7虚拟机设置静态IP

虚拟机上ip是有时效性的&#xff0c;过期后会自动更换&#xff0c;因此如果想让ip不变&#xff0c;就得手动设置静态ip。 第一步&#xff1a;先查看主机的子网掩码 1.1、windows命令ipconfig&#xff0c;如下图&#xff1a; 第二步&#xff1a;查看虚拟机的网关、ip区间的设…

单臂路由实验(华为)

思科设备参考&#xff1a; 单臂路由实验&#xff08;思科&#xff09; 一&#xff0c;实验目的 在路由器的一个接口上通过配置子接口的方式&#xff0c;实现相互隔离的不同vlan之间互通。 ​ 二&#xff0c;设备配置 Switch1 <Huawei>sys [Huawei]vlan batch 10 20…

nuxt.js中使用axios以及二次封装

nuxtjs中使用axios 有两种方法&#xff1a; 1. 普通的方式&#xff1a; 1.1&#xff1a; npm或者yarn安装依赖包 npm install axios -S 普通使用方式网上查询&#xff0c;这里不再过多叙述。 2. 集成的方式&#xff1a; 2.1:首先安装 nuxtjs/axios npm install nuxtjs/axi…

备考蓝桥杯每日一题——C++分支结构“ABC”

今天在洛谷上遇到了一道很有意思的题 题目&#xff1a; 【题目描述】 三个整数分别为 A,B,C。这三个数字不会按照这样的顺序给你&#xff0c;但它们始终满足条件&#xff1a;A<B<C。为了看起来更加简洁明了&#xff0c;我们希望你可以按照给定的顺序重新排列它们。 【输入…

【C++】类与对象(三)—运算符重载|const成员函数|取地址及const取地址操作符重载

前言 运算符重载&#xff0c;自增自减运算符重载&#xff0c;const成员函数&#xff0c;取地址及const取地址操作符重载 文章目录 一、运算符重载自增和自减运算符重载 二、const 成员函数三、取地址及const取地址操作符重载&#xff08;了解即可&#xff09; 一、运算符重载 运…

网络开发的隐形壁垒:如何巧妙解决跨域难题?

什么是跨域 跨域是浏览器受同源&#xff08;协议、域名、端口&#xff09;策略的限制&#xff0c;不允许不同源的站点之间进行某些操作&#xff08;如发送ajax请求&#xff0c;操作dom&#xff0c;读取cookie&#xff09;&#xff0c;如果不进行特殊配置是不能操作成功的&…