在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
| <!-- @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中,这样就可以自由选择区分打包项目。
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"gulp项目如何进行配置环境变量"
最新评论