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"就可以了。