scp2是一个基于ssh2增强实现，纯粹使用JavaScript编写。而ssh2就是一个使用nodejs对于SSH2的模拟实现。scp，是secure copy的缩写, scp是Linux系统下基于SSH登陆进行安全的远程文件拷贝命令
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' },
]
}
}
})
]
},
如果是传统vue-cli2搭建的项目，在webpack.prod.conf.js里面添加
const FileManagerPlugin = require('filemanager-webpack-plugin')
在module.export前面添加
webpackConfig.plugins.push(
new FileManagerPlugin({
onEnd: {
delete: [
'./largescreen.zip',
],
archive: [
{ source: './largescreen', destination: './largescreen.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，用哪个看个人习惯吧）。
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
