前端项目自动化一键打包上传云服务器

前端

2023-12-14 17:18:15

引言

在前端项目开发过程中，经常需要经历以下步骤：

运行npm run build命令构建项目。
使用工具将构建后的项目打包成zip文件。
将zip文件上传到云服务器。

这些步骤比较繁琐，容易出错。本文将介绍两种方法，将前两步合并为一步，实现前端项目的一键打包上传。

方法一：使用NPM脚本

NPM脚本是一种在NPM包中定义的脚本，可以通过npm run命令执行。我们可以使用NPM脚本来实现前端项目的一键打包上传。

首先，在项目的package.json文件中添加以下脚本：

"scripts": {
  "build": "npm run build",
  "zip": "zip -r build.zip build",
  "deploy": "scp build.zip user@host:/path/to/deploy"
}

其中：

"build"脚本用于构建项目。
"zip"脚本用于将构建后的项目打包成zip文件。
"deploy"脚本用于将zip文件上传到云服务器。

然后，就可以通过以下命令一键打包上传前端项目：

npm run deploy

方法二：使用JS脚本

除了使用NPM脚本，我们还可以使用JS脚本来实现前端项目的一键打包上传。

首先，创建一个名为deploy.js的JS文件，并添加以下代码：

const { exec } = require('child_process');

exec('npm run build', (err, stdout, stderr) => {
  if (err) {
    console.error(err);
    return;
  }

  exec('zip -r build.zip build', (err, stdout, stderr) => {
    if (err) {
      console.error(err);
      return;
    }

    exec('scp build.zip user@host:/path/to/deploy', (err, stdout, stderr) => {
      if (err) {
        console.error(err);
        return;
      }

      console.log('项目已成功打包上传至云服务器。');
    });
  });
});