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

2020年09月26日 03:41 · 阅读 4520

1 文章起源

前段时间在掘金已经有个小伙伴分享了他的前端自动构建方式👉前端一键自动部署工具，我也来分享一下我的方式吧，与他的相比，使用方式和技术都差不多，他的还更漂亮，哈哈哈，我的也并没有啥优势，主要是做个分享，让各位小伙伴有更多的选择。本篇文章主要是上一篇文章👉分享一下我用VueCli创建项目以后都干了哪些准备工作的拓展篇

2 那我们开始了

2.1 先做点什么

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

👉gulp 基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。
👉gulp-sftp-up5 ~~我个人在gulp-sftp-up4的基础上添加了远端删除文件夹属性~~ 已经拓展了自定义命令，远端删除，配置本地.env（0.0.8以上版本）
👉cross-env 运行跨平台设置和使用环境变量的脚本

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

2.2 开始配置相关文件

在项目根目录添加 deploy.js 文件，~~我这边就不搞Node环境变量了~~，小伙伴可自行设置，还是很有必要要搞配置文件的，防止泄露信息

使用方式一（不安全）

// deploy.js

/**
 * 部署之前请检查好要部署的路径
 * 如有多个环境，自行拓展
 */
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]))
复制代码

使用方式二（需配置SFTP属性）

为了提高安全性，请将配置信息保存在名为.env.sftp的 json 格式的文件中（或保存为 options.authFile 设置的任何值）。 请确保将此文件添加到.gitignore 。
现将 user pass host port 移至 .env.sftp 配置文件中，方式一的使用方法保留，请酌情选择

// .env.sftp  请严格按照JSON格式
{
  "test": {
    "user": "root",
    "pass": "123456",
    "host": "192.168.0.1",
    "port": 22
  },
  "prod": {
    "user": "root",
    "pass": "123456",
    "host": "192.168.0.",
    "port": 22
  }
}
复制代码

// deploy.js

/**
 * 部署之前请检查好要部署的路径
 * 如有多个环境，自行拓展
 */
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", // 部署到服务器的路径
    SFTP: 'test', // 对应着.env.sftp的可以
    removeCurrentFolderFiles: true, // 该属性可删除 remotePath 下的所有文件/文件夹
  },
  prod: {
    remotePath: "/service/web", // 部署到服务器的路径
    SFTP: 'prod',
    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 ，以及今天的自动化构建发布也在里头，小伙伴要开启新项目的话这个是个很不错的选择呢

👉项目模板地址

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

本文使用 👉mdnice 排版