[JavaScript知识库]vue scp2 webpack gulp 前端自动化部署并将打包文件压缩成zip文件 发送到ftp服务器 解放双手

1、下载scp2到项目当中npm install scp2 --save-dev
2、配置package.json的执行命令

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build && node ftp.js",//生产环境
    "build:stage": "vue-cli-service build --mode staging && node ftp.js",//测试环境
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  }

3、配置webpack打包将生成的dist文件打包成dist.zip文件

npm install filemanager-webpack-plugin --save-dev

const FileManagerPlugin = require('filemanager-webpack-plugin')

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      new FileManagerPlugin({
        events: {
          onEnd: {
            delete: [
              './dist.zip',
            ],
            archive: [
              { source: './dist', destination: './dist.zip' },
            ]
          }
        }
      })
    ]
  },

4、我是在项目根目录下建了一个ftp.js

var client = require('scp2')

console.log('\x1B[32m┌───────────────────────────────────────────────────────────────────────────────┐');
console.log('\x1B[37m')
console.log('\x1B[32m 预发布中... ');
console.log('\x1B[37m')
console.log('\x1B[32m└───────────────────────────────────────────────────────────────────────────────┘');

client.scp('dist.zip', {
  host: '', //服务器ip
  port: '',//服务器端口
  username: '',//用户名
  password: '',//密码
  path: ''//放置服务器位置
}, function (err) {
  if (!err) {
    console.log('\x1B[32m┌─────────────────────────────────────────────────────────────────────────────────────────┐');
    console.log('\x1B[37m')
    console.log('\x1B[32m  预发布成功');
    console.log('\x1B[37m')
    console.log('\x1B[32m  前往Jenkins发布', 'Jenkins发布代码地址*************');
    console.log('\x1B[37m')
    console.log('\x1B[32m└─────────────────────────────────────────────────────────────────────────────────────────┘');
    console.log('\x1B[37m')
  } else {
    console.error(err)
  }
}) 

可以配置Jenkins自动化将ftp压缩文件发布到NGINX等服务器上

优化一下打包发布的时候控制台的提醒 利用官方的提示可能会更醒目一点，之前是自己瞎写的提示

var client = require('scp2')
// 下面三个插件是部署的时候控制台美化所用 可有可无
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到服务器...'));
spinner.start();

client.scp('dist.zip', {
  host: '', //服务器ip
  port: '',//服务器端口
  username: '',//用户名
  password: '',//密码
  path: ''//放置服务器位置
}, function (err) {
spinner.stop();
  if (!err) {
    console.log('\x1B[32m┌─────────────────────────────────────────────────────────────────────────────────────────┐');
    console.log('\x1B[37m')
    console.log('\x1B[32m  预发布成功');
    console.log('\x1B[37m')
    console.log('\x1B[32m  前往Jenkins发布', 'Jenkins发布代码地址*************');
    console.log('\x1B[37m')
    console.log('\x1B[32m└─────────────────────────────────────────────────────────────────────────────────────────┘');
    console.log('\x1B[37m')
  } else {
    console.error(err)
  }
}) 

朋友问这块的方法，顺便记录一下之前自己一直使用的自动化部署前端脚本

再补充一种在这之前使用的一种自己感觉相对啰嗦的方法吧
将build、打包生成的dist文件夹压缩成zip以及将zip文件发送到ftp服务器中都交给gulp，贴配置

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();
var path = require('path');
var del = require('del');
var zip = require('gulp-zip')
var ftp = require('gulp-ftp')

var distPath    = path.resolve('./dist');
var version     = ''; // 版本号
var versionPath = ''; // 版本号路径
var env = process.env.npm_config_qa ? 'qa' : process.env.npm_config_uat ? 'uat' : 'prod'; // 运行环境

// 清除dist distzip文件夹
gulp.task('clean:dist', function () {
  return del(['dist/**/*', './distzip/**/*'])
});


// 创建版本号(年月日时分)
(function () {
  var d = new Date();
  var yy = d.getFullYear();
  var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1);
  var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate();
  var h  = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours();
  var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes();
  version = yy + MM + DD + h + mm;
  versionPath = distPath + '/' + version;
})();

// 编译
gulp.task('build', $.shell.task([ 'node build/build.js' ]));

// 创建版本号目录
gulp.task('create:versionCatalog', function () {
  return gulp.src(`${distPath}/static/**/*`)
    .pipe(gulp.dest(`${versionPath}/static/`))
});

// 替换${versionPath}/static/js/manifest.js window.SITE_CONFIG.cdnUrl占位变量
gulp.task('replace:cdnUrl', function () {
  return gulp.src(`${versionPath}/static/js/manifest.js`)
    .pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"'))
    .pipe(gulp.dest(`${versionPath}/static/js/`))
});

// 替换${versionPath}/static/config/index-${env}.js window.SITE_CONFIG['version']配置变量
gulp.task('replace:version', function () {
  return gulp.src(`${versionPath}/static/config/index-${env}.js`)
    .pipe($.replace(/window.SITE_CONFIG\['version'\] = '.*'/g, `window.SITE_CONFIG['version'] = '${version}'`))
    .pipe(gulp.dest(`${versionPath}/static/config/`))
});

// 合并${versionPath}/static/config/[index-${env}, init].js 至 ${distPath}/config/index.js
gulp.task('concat:config', function () {
  return gulp.src([`${versionPath}/static/config/index-${env}.js`, `${versionPath}/static/config/init.js`])
    .pipe($.concat('index.js'))
    .pipe(gulp.dest(`${distPath}/config/`))
});

// 替换${versionPath}/static/css/app.css 中的icon资源路径
gulp.task('replace:iconsrc', function () {
  return gulp.src(`${versionPath}/static/css/app.css`)
    .pipe($.replace(/static\/fonts\/element-icons/g, "../fonts/element-icons"))
    .pipe(gulp.dest(`${versionPath}/static/css/`))
});


//清除, 编译 / 处理项目中产生的文件
gulp.task('cleanBuild', function () {
  return del([`${distPath}/static`, `${versionPath}/static/config`])
});
// 清空
gulp.task('clean', function () {
  return del([versionPath])
});

// 把dist包移动到 distzip/ 下 要不然Jenkins发布解压有问题
gulp.task('move:dist', function () {
  return gulp.src('./dist/**/*').pipe(gulp.dest('./distzip/dist/'))
})

// 打包成zip包
gulp.task('build:zip', function () {
  return gulp.src('./distzip/**/*').pipe(zip('dist.zip')).pipe(gulp.dest('./distzip'))
})

// 发送至207服务器的pzfw目录下
gulp.task('push:ftp', function () {
  return gulp.src('./distzip/dist.zip').pipe(ftp({
    host: '',
    port: '',
    user: '',
    pass: '',
    remotePath: '/pzfw/'
  }))
})

gulp.task('open:jenkins')

//gulp.series|4.0 依赖
//gulp.parallel|4.0 多个依赖嵌套
gulp.task('default', gulp.series(gulp.series('clean:dist', 'build', 'create:versionCatalog', 'replace:cdnUrl', 'replace:version', 'concat:config', 'replace:iconsrc', 'cleanBuild', 'move:dist', 'build:zip', 'push:ftp')));

其实gulp的配置和功能更多，也挺好用的，都能满足我们自动化部署前端代码，因为项目大多用vue-cli搭建就直接打包什么的都习惯用webpack了，加个filemanager-webpack-plugin和scp2完全满足并且更加配置会清晰一点（两种方法个人都使用过都很nice，用哪个看个人习惯吧）。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖