2019-04-11 分类：别具匠心 作者：管理员 阅读（1125）
在webpack流行之前，gulp可是主流前端工程化工具，即使是当前，gulp也并未被淘汰，在某些时候，gulp比webpack更方便，这次主要说怎么在gulp构建工具下的项目去做环境变量区分。在开发项目时候，我们经常需要区分线上环境测试环境，又或者开发环境，不同的环境我们可能打包出来的结果会不会，调用的接口不同，打包的方法使用时候可能有所不同
1 | npm i --save-dev cross-env |
安装这个插件，在npm run xx时候我们可以把环境变量关键词植入进去，如下在package.json中，cross-env代表插件前缀(固定的)，NODE_ENV=developmen值就是对应设置的环境变量值，gulp自然就是gulp默认打包命令
1 2 3 4 | "scripts": { "build": "cross-env NODE_ENV=production gulp", "pre": "cross-env NODE_ENV=preproduction gulp" } |
那么现在我们理解下，在package.json的script中我们配置了两个命令，在npm run build时候，我们去执行gulp命令，并且植入一个环境变量NODE_ENV=production
gulpfile.js是gulp配置核心文件，在文件中就可以拿到环境变量值，从而进行区分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const gulp = require('gulp'); const htmlmin = require('gulp-htmlmin');//压缩html // 环境变量区分 const env = process.env.NODE_ENV let target = env === 'production' ? './dist' : './pre' console.log('当前环境：'+env+'对应打包地址：'+target) // 拷贝文件 gulp.task("copyHtml", function () { //pipe后面对应的地址就是将前面路径文件拷贝复制到哪里去 console.log('\n正在打包编译中，请稍后......................\n'); return gulp.src([ "!src/*.html"]).pipe(gulp.dest(target)) }); //以下省略---------------------------------------------------------------------- |
在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在gulp、webpack中它的用途是判断生产环境或开发环境的依据的。production这个关键词是大家约定俗成的，通常指生产环境，也就是线上，对应的还有development（开发环境），甚至preproduction（测试环境），注意，它是约定俗成的，并不是唯一
当你完成到这一步，你应该有点小激动，但是，离真正的成功还有几步之遥，因为目前你似乎只能在gulpfile.js中去区分环境，那我们开发的src目录的js甚至html文件中又如何进行环境区分呢？
在gulp配置命令中配置，把当前拿到的环境变量植入到js和html中，如下，在进行压缩html操作时候，我们把环境变量配置到html文件中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //压缩html gulp.task('miniHtml', () => { return gulp.src(['src/*.html']) .pipe(preprocess({ context: { // 此处可接受来自调用命令的 NODE_ENV 参数，默认为 development 开发测试环境 NODE_ENV: process.env.NODE_ENV || 'development', }, })) .pipe(htmlmin({ collapseWhitespace: false, // 折叠html节点间的空白 minifyCSS: true, // 压缩css minifyJS: true, // 压缩js removeComments: true, // 去除注释 removeEmptyAttributes: true, // 去除空属性 removeRedundantAttributes: true // 去除与默认属性一致的属性值 })) .pipe(gulp.dest(target)); }); |
.html文件中我们就可以进行一下配置区分
1 2 3 4 5 6 | <!-- @if NODE_ENV='production' --> <script src="https://lijun2017.oss-cn-shanghai.aliyuncs.com/js/jquery-2.1.4.min.js"></script> <!-- @endif --> <!-- @if NODE_ENV!='production' --> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- @endif --> |
上面意思就是，如果是我们我们打包npm run build，那我们配置的环境变量就是production，production时候，我们html文件最后渲染的是jquery-2.1.4.min.js文件，否在是jquery-2.1.1.min.js文件，它就是个注释形式，通过判断环境来进行是否渲染哪一片段代码，你可以在其中放js,html等都是可以的
我们要知道在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息，然后通过cross-env插件配置package.json，配置好了我们的gulpfile.js核心配置文件就能拿到环境变量。再用gulp-preprocess插件我们可以把环境变量植入到html和js中，这样就可以自由选择区分打包项目。
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与 
对的，记得还要留意下header中的flex-shrink属性
评：未知宽高不满一屏footer固定在底部这里主要是用了flex-grow属性吗?当子盒子高度小于父盒子高度时占据了父盒子剩余的空间,...
评：未知宽高不满一屏footer固定在底部嗯，语言没表达好，我去改下，我最后写的那段demo，是想体现数据不可变的思想，通过去单独加一...
评：js中map方法到底是否会改变原始数组？你最后还是写的map呀
评：js中map方法到底是否会改变原始数组？0基础手把手教怎么做主题的教程那得录制视频，光文字描述没多大用，录视频的话，正所谓台上三分钟...
评：未知高度div在屏幕上下左右居中fixed固定定位你从0开始教人制作一个简单的WP主题吧。估计比你这个文章受众更多。
评：未知高度div在屏幕上下左右居中fixed固定定位
共有 0 条评论 - gulp项目如何进行配置环境变量