前言
在前端开发过程中，我们通常需要把项目打包成静态文件，然后上传到服务器进行部署。但是，随着项目逐渐变得复杂，每次手动上传和部署都变得非常繁琐和容易出错。为了提高效率和减少错误，我们可以使用 npm 包 push-dir 来自动化部署。
push-dir 简介
push-dir 是一个非常简单易用的 npm 包，可以将本地文件夹中的文件推送到仓库的指定分支中。使用 push-dir 可以实现自动化部署，减少手动部署的工作量。同时，它非常适合用于将静态网站部署到 github pages 上。
安装 push-dir
安装 push-dir 很简单，只需要在终端中执行以下命令即可：
npm install push-dir --save-dev
安装完毕后，我们就可以在脚本中使用 push-dir 来自动化部署了。
使用 push-dir
使用 push-dir 很简单，首先需要在 package.json 中添加以下命令：
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
- --dir：表示要推送的文件夹名称，默认为 dist
- --branch：表示要推送到的分支名称，默认为 gh-pages
- --cleanup：表示在推送之前删除远程分支上除了 .gitignore 中指定以外的其他文件
在命令行中执行以下命令即可实现自动化部署：
npm run deploy
需要注意的是，使用 push-dir 之前需要先生成静态文件，可以使用不同的打包工具（例如 webpack）来生成。
示例代码
以下为一个示例代码，使用 webpack 来打包生成静态文件，然后使用 push-dir 自动化上传到指定分支中：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
-- ----
------ -----------------
-- --------
------- -
----- ----------------------- --------
--------- ------------
--
-- ----
-------- -
-- ---- ---------- --
--- -------------------
--------- -------------------
--------- -------------
---
-- ----- -------- ---
--- ----------------------
---- -------
------- -----------
-------- -----
---
--
--总结
自动化部署可以大大减少手动上传文件和部署的麻烦，提高开发效率和减少错误。推荐使用 push-dir 来自动上传项目文件，它是一个非常简单易用的 npm 包，可以实现自动上传指定文件夹到指定分支的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61678