gulp搭建项目到服务器,前端利用gulp快速部署web 项目

一、背景

最近在多个项目上线部署过程中,发现每一次打包到测试环境或者开发环境中,都需要手动打包后再把代码拷贝到远程服务文件中,偶尔出现放错地方,被测试叼死了。最近在摸鱼过程中,利用了gulp来代替我手贱的行为,简易实现打包部署一步到位,真香。。。

二、实现思路

我们在vue项目构建完成后会在项目根目录生成一个dist目录,只需要将该目录下的文件上传到服务器的web容器即可访问。我们要做的就是通过命令行将dist目录下所有文件上传到服务器对应的目录下。

三、实现步骤

1、安装gulp和gulp-sftp

npm i gulp gulp-sftp --save-dev

2、在项目根目录新建gulp配置文件 gulpfile.js

const gulp = require('gulp')

const sftp = require('gulp-sftp')

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

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

.pipe(sftp({

host: 'IP',

user: '用户名',

pass: '密码',

port: '端口',

remotePath: `服务器对应存放web的目录`

}))

})

主要是通过gulp去创建这个任务名test,然后通过gulp-sftp连接后转化为流上传到指定目录,代码中的test,是可以自定义的,用于gulp区分任务的名称,也可以同时配置多个任务。

3、优化

如果我们直接把服务器的账号和密码直接写在代码中,很容易濑野的哦!所以我们可以创建``gulp-sftp配置文件.ftpPass```,为了保证ftp账号安全,将FTP账号密码配置放在单独的文件中,禁用掉在版本控制中使用。

4、配置打包命令

对于gulp配置已经完成了,接下来就是打包后上传的操作了,我们可以在package.json文件中增加

"scripts": {

"build": "vue-cli-service build && gulp test",

"gulp": "gulp test"

},

如果你想打包后自动上传,直接把命令写在至此我们可以使用gulp来执行定义的上传任务了"build": "vue-cli-service build && gulp test"就可以了。

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值