前端利用gulp快速部署web 项目

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

二、实现思路

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

三、实现步骤

1、安装 gulpgulp-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" 就可以了。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章