前端真一键打包自动化构建部署前段时间在掘金已经有个小伙伴分享了他的前端自动构建方式👉前端一键自动部署工具，我也来分享

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 排版

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