文档上传直接到服务器上,前端工程:实现文件打包好后自动上传至服务器

现在前端项目都是用构建工具写的,比如vue-cli,create-react-app,dva-cli等,打包完每次都要把文件复制到服务器,要是后期甲方爸爸不做修改还好,要是每天给你提一个这里加个图片,那里改下样式的,每次都是npm run build,然后打开服务器,上传。。。很累,也很烦。

其实像以上那种构建工具生成的项目里可以再搭配gulp一起使用,实现打包好项目后自动上传至服务器,

先安装2个依赖包:

npm install gulp gulp-sftp --save-dev

然后在项目根目录下新建gulpfile.js文件(gulp的默认入口文件)

var gulp = require('gulp');

var sftp = require('gulp-sftp');

gulp.task('server', function () {

return gulp.src('./dist/**/*')

.pipe(sftp({

host: '192.168.1.111',

port:22,

user: 'root',

pass: '123456',

remotePath:'/var/cjy/home'

}));

});

如上,配置一个简单的任务,任务配置参数自行百度gulp-sftp这个插件,文档写的很详细了。

之后再在package.json里面配置一条命令"upload": "node build/build.js && gulp"

"scripts": {

...,

"server": "roadhog build && gulp server"

},

如上,这样如果想打包上传直接npm run upload就好了。

注:gulp4.0需要更换gulp-sftp-up4这个插件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值