基于gulp的一个简单的处理多个api域名环境的开发工作流

bergwhite 发布于2019-08-20 18:21 / 2193人阅读

摘要：简单的工作流基于利用进行多环境域名开发打包转压缩前言最近苦于搬砖，我们有三个开发环境，不同的环境的的域名不一样，像我这么懒的人只能一键打包，不太适用，没办法，只能写一个基于的，适合自己用的工作流了，哎一声长叹传送门在中使用

gulp-simple-workflow-multi-host

github

简单的工作流基于Gulp 利用 gulp-preprocess 进行多环境（api域名）开发、打包

sass转css css&js&html压缩

前言

最近苦于搬砖，我们有三个开发环境，不同的环境的api的域名不一样，像我这么懒的人只能一键打包，webpack不太适用，没办法，只能写一个基于gulp的，适合自己用的工作流了，哎~~~（一声长叹）

gulp-preprocess

传送门

在html中使用

test环境下转换效果

在中使用

var host
// @if HOST_ENV="test"
host = "testhost"
// @endif
// @if HOST_ENV="qa"
host = "qahost"
// @endif

test环境下转换效果

var host
host = "testhost"

调试 dev

自动刷新

不压缩

## 开发启动 默认test环境，（gulpfile.js里面配置）
npm run dev

## 调试指定的域名,可选host test qa pe （gulpfile.js里面配置）
npm run dev-host test

命令做了什么

清空dist

把dev文件处理完传到dist中

观察dev中的文件，有变化的进行步骤2

开启一个服务器

观察dist中的文件，有变化即刷新浏览器

打包 build

压缩

## 打包全部
npm run build-all

## 打单个环境的包, 可选host test qa pe （gulpfile.js里面配置）
npm run build test

命令做了啥

清空对应路径

把文件处理传送到指定的路径中

调试打包效果

dev 源代码路径，dist 开发调试的路径， output 打包路径

├── README.md
├── dev
│   ├── example.js
│   └── index.html
├── dist
│   ├── example.js
│   └── index.html
├── gulpfile.js
├── output
│   ├── pe
│   │   ├── example.js
│   │   └── index.html
│   ├── qa
│   │   ├── example.js
│   │   └── index.html
│   └── test
│       ├── example.js
│       └── index.html
├── package.json
└── tree.txt

专线服务 idc机房托管基于js的语音处理简单的小程序开发基于java的java开发基于javascript的webgis开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84383.html

移动端H5多页开发拍门砖经验

摘要：以下会以其中一个以公积金页面开发项目作为例子，介绍移动端的一些常见问题和使用作为进行多页开发的经验。所以要想在微信开发调试工具中获取，我们需要使用一种叫做内网穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);两年前刚接触移动端开发，刚开始比较疑惑，每次遇到问题都是到社区里提问...

hightopo 2019-08-22 18:20 评论0 收藏0
聊聊webpack

摘要：但是由于缺乏规范化管理，出现了很多种模块化规范，从针对的规范，到针对浏览器端的，终于在里规范了前端模块化。可以通过两种方式之一终端或。导出多个配置对象运行时，所有的配置对象都会构建。在阶段又会发生很多小事件。随着前端的迅速发展，web项目复杂度也是越来越高。为了便捷开发和利于优化，将一个复杂项目拆分成一个个小的模块，于是模块化开发出现了。但是由于缺乏规范化管理，出现了很多种模块化规范...

Ashin 2019-08-26 10:21 评论0 收藏0
实时编辑

摘要：静态服务器代理你的域名或注入通过流的方式创建任务流程这样您就可以在您的任务完成后调用，所有的浏览器将被告知的变化并实时更新因为只在乎您的在编译完成后注意后调用重载。方法一使用Google Chrome DevTools 方法二工作区Browsersync 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块，如果您想要快速使用它，也许您需要先...

wenshi11019 2019-08-23 15:34 评论0 收藏0
Webpack 爱与恨

摘要：关于标题，为什么是爱与恨因为在刚出来的时候，我并不是坚定的支持者，有很多地方用起来不方便，设计不合理。用户只有首次访问需要下载全部静态资源，以后的访问都直接使用缓存资源。首先，在中添加字段，当为时，则开启服务。例如请求的是则返回中的数据。关于标题，为什么是爱与恨？因为在 webpack 刚出来的时候，我并不是坚定的支持者，有很多地方用起来不方便，api 设计不合理。随着 webpa...

HmyBmny 2019-08-20 16:47 评论0 收藏0