前端 真一键打包自动化构建部署

微信扫一扫,分享到朋友圈

前端 真一键打包自动化构建部署

1 文章起源

前段时间在掘金已经有个小伙伴分享了他的前端自动构建方式
:point_right:
前端一键自动部署工具

,我也来分享一下我的方式吧,与他的相比,使用方式和技术都差不多,他的还更漂亮,哈哈哈,我的也并没有啥优势,主要是做个分享,让各位小伙伴有更多的选择,不过这类型的部署方式有一定的风险的,毕竟密码IP等都暴露在明下,建议小伙伴提交的时候将配置信息放置node环境变量中,提交之前忽略配置文件即可。本篇文章主要是上一篇文章
:point_right:
分享一下我用VueCli创建项目以后都干了哪些准备工作

的拓展篇

2 那我们开始了

2.1 先做点什么

首先我们现在项目(vue/react)根目录安装如下插件

yarn add gulp gulp-sftp-up5 cross-env -D
// or
npm i gulp gulp-sftp-up5 cross-env -D
复制代码

2.2 开始配置相关文件

  • 在项目根目录添加 deploy.js 文件,我这边就不搞Node环境变量了,小伙伴可自行设置

/**
 * 部署之前请检查好要部署的路径
 * 如有多个环境,自行拓展
 */
const gulp = require('gulp')
const sftp = require('gulp-sftp-up5')
const CONFIG = require('./vue.config') // 只是为了保证上传的文件夹一致

const sftpConfig = {
// 此处的key对应着package.json中脚本的 APP_ENV
  test: {
    remotePath: '/service/web', // 部署到服务器的路径
    host: '192.168.0.99', // 服务器地址
    user: 'root', // 帐号
    pass: '1433223', // 密码
    port: 22, // 端口
    removeCurrentFolderFiles: true  // 该属性可删除 remotePath 下的所有文件/文件夹
  },
  prod: {
    remotePath: '/service/web', // 部署到服务器的路径
    host: '127.0.0.1', // 服务器地址
    user: 'root', // 帐号
    pass: '1433223', // 密码
    port: 22, // 端口
    removeCurrentFolderFiles: true
  }
}

// 采用管道流的方式将 outputDir 中的文件上传到远端
gulp.src('./' + CONFIG.outputDir + '/**').pipe(sftp(sftpConfig[process.env.APP_ENV]))
复制代码
  • 设置我们的package.json文件,其中 APP_ENV 的值需要和 deploy.js 中sftpConfig的键对应,用来区分构建部署到哪个环境

 "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build:test": "vue-cli-service build --mode build_test && cross-env APP_ENV=test npm run deploy",
    "build:prod": "vue-cli-service build --mode build_prod && cross-env APP_ENV=prod npm run deploy",
    "deploy": "node ./deploy.js"
  }
复制代码
  • 经过我的观察,我发现好多小伙伴每次运行项目或者打包项目的时候喜欢敲命令,其实不用那么麻烦的,直接按一下就可以执行的,你们仔细看VScode的左边,会自动出现可执行的 scripts 脚本,你点击dev中的小三角他就执行npm run dev,你点击 build:test,他就执行 npm run build:test,方便的很,省时省力还不容易出错

2.3 注意事项

我们每次发布的时候只能按顺序来发布的,打个比方,你发布测试环境的期间,最好不要同时去发布正式环境代码,因为会对dist文件夹造成覆盖,其中有你设置的VUE_APP的环境变量等,建议小伙伴切记按顺序来,还有脚本里面的APP_ENV一定要和deploy.js中的保持一致

3 完结

本次文章特别简单,让小伙伴有更多的选择,开开眼界,同时纠正一下上一篇文章的错误 compression-webpack-plugin 插件没用,开启GZIP的话Nginx才是主力

最后感谢各位小伙伴的品尝,下方贴出我已经准备好的模板代码,内含有一些参考代码和一些配置好的vue.config.js ,以及今天的自动化构建发布也在里头,小伙伴要开启新项目的话这个是个很不错的选择呢

做最出色的时间管理者,也就是时间的主人。 ——我说的

微信扫一扫,分享到朋友圈

前端 真一键打包自动化构建部署

从2.4到9.4,这才是我们要的「逆行者」

上一篇

5亿播放量,这剧哪里上头了?

下一篇

你也可能喜欢

前端 真一键打包自动化构建部署

长按储存图像,分享给朋友