美文网首页
前端利用gulp快速部署web 项目

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

作者: bayi_lzp | 来源:发表于2020-01-14 15:10 被阅读0次

一、背景

最近在多个项目上线部署过程中,发现每一次打包到测试环境或者开发环境中,都需要手动打包后再把代码拷贝到远程服务文件中,偶尔出现放错地方,被测试叼死了。最近在摸鱼过程中,利用了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"就可以了。

相关文章

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

    一、背景 最近在多个项目上线部署过程中,发现每一次打包到测试环境或者开发环境中,都需要手动打包后再把代码拷贝到远程...

  • gulp前端自动化开发的工具

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。 在 Web 前端开...

  • gulp 用法大全

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。在 Web 前端开发...

  • gulp详解一

    gulp简介 gulp,是基于nodejs的前端自动化构建工具,用于压缩项目文件,合并文件,部署等,简言之,就是解...

  • 【SpringBoot】Gulp管理Thymeleaf前端资源

    在Springboot web项目中,我们可以用Gulp对前端资源进行管理,比如revision、minify等等...

  • 前端自动化工具打包gulp学习之路

    gulp作为前端构建项目的一个工具,自己理解gulp主要方面的作用:1.构建本地服务器。2.快速构建项目。3.对代...

  • Hello-Gulp

    Gulp の 快速入门 Gulp概要 Gulp一种流式自动化工具,在构建前端应用是非常给力的哟 Gulp快速应用 ...

  • 优秀文章收集

    html css javascript 前端框架与插件 项目总结与日常记录 前端其他 gulp gulp API ...

  • Gulp 和 Grunt

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。找到“压缩”、“组合...

  • vue打包自动部署阿里云oss

    web架构前后端完全分离,所以前端代码部署到OSS,可以实现质的飞跃,前端页面秒开,利用oss可以部署静态服务器的...

网友评论

      本文标题:前端利用gulp快速部署web 项目

      本文链接:https://www.haomeiwen.com/subject/tkfaactx.html