gulp项目如何进行配置环境变量

2019-04-11 分类：别具匠心作者：管理员阅读（6344）

在webpack流行之前，gulp可是主流前端工程化工具，即使是当前，gulp也并未被淘汰，在某些时候，gulp比webpack更方便，这次主要说怎么在gulp构建工具下的项目去做环境变量区分。在开发项目时候，我们经常需要区分线上环境测试环境，又或者开发环境，不同的环境我们可能打包出来的结果会不会，调用的接口不同，打包的方法使用时候可能有所不同

首先，安装插件cross-env

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-preprocess

在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

<script src="https://lijun2017.oss-cn-shanghai.aliyuncs.com/js/jquery-2.1.4.min.js"></script>


<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

上面意思就是，如果是我们我们打包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中，这样就可以自由选择区分打包项目。

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」