唯品秀博客
首页 > 别具匠心 > gulp项目如何进行配置环境变量

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

2019年04月11日 作者:管理员 187次浏览

在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中,这样就可以自由选择区分打包项目。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 2 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
2

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - gulp项目如何进行配置环境变量

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,了解更多...

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

站点统计

  • 文章总数: 180 篇
  • 草稿数目: 2 篇
  • 分类数目: 13 个
  • 页面总数: 21 个
  • 评论总数: 849 条
  • 链接总数: 14 个
  • 标签总数: 357 个
  • 建站时间: 857 天
  • 注册用户: 463 人
  • 访问总量: 8682005 次
  • 最近更新: 2019年4月21日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线