web-app-ftp-publish-基于FTP的前端自动发布工具

最近随手写了一个React和Vue的自动发布工具,可以通过简单的脚本命令(npm run publish)将build或dist文件夹上传到服务器目录,实现一键发布

描述

使用 FTP Server,将 ReactJS App 和 VueJS App 的构建文件发布到 web 服务器目标目录。 优点如下:

  • 没有残留的历史文件。 在发布过程中,将生成当前版本的目录 json。 当前版本中不再引用的文件在上传后将被删除。
  • 优化文件的发布顺序。 为了防止影响在线用户访问您的 web 应用程序,指定的条目文件(如: index. html)将最后上传

安装

npm i web-app-ftp-publish

例子

// publish.js
 const Publisher = require(`web-app-ftp-publish`);
 const path = require('path');
 
 
 let publisher = new Publisher({
     ftp:{
         host: "",
         port: "",
         user: "",
         password: "",
     }, // 必传。 Ftp 配置对象。 配置文件链接到这里: https://github.com/mscdex/node-FTP#methods
     targetPath: path.resolve(__dirname + "/./build"), // 必传。构建目录的绝对路径(build或dist文件夹路径)
     indexFileName:"index.html", // 可选。 构建目录的index文件名。 默认 'index.html'
     destPath:"/react/build", // Ftp 目的地目录. default "/',ftp server root  directory
     catalogFileName:"build-dir-catalog" //Optional . Catalog json file name.default 'catalog.json'
 });
 
 publisher.resume();
// package.json

  "scripts": {
    "start": "node  scripts/start.js",
    "build": "node  scripts/build.js",
     "publish": "node  [YOUR PATH]/publish.js" // 添加publish脚本命令
  },
    // Terminal
    npm run publish

配置

  • ftp-必传。 Ftp 配置对象。 配置文件链接到这里: https://github.com/mscdex/nod...
  • targetPath - 必传。构建文件夹(build或者dist)的项目路径
  • indexfilename-可选。 构建文件夹(build或者dist)索引文件名。 默认index. html。
  • destPath - 可选。 将文件上传到Ftp 哪个文件夹下下。 默认ftp 服务器根目录。
  • catalogFileName - 可选。目录 json 文件名. 默认“Catalog.json”

方法

  • resume, 开始上传

项目地址

你可能感兴趣的:(前端,react.js,vue.js,发布应用,ftp)