通过gulp直接将vue项目打包并且上传到服务器

当我们写vue项目的时候，往往要先进行项目打包，然后再上传到我们的服务器，这样每次重复，感觉特别麻烦，这个时候我们就可以通过glup来帮我们解决问题

首先我们在项目新建一个gulpfile.js文件

然后安装两个东西

npm install --save-dev gulp gulp-sftp

接着在gulpfile.js里面

const gulp = require('gulp')
const ftp = require('gulp-sftp')

const config = {
    uploadTest: {
        remotePath: '', // 部署到服务器的路径
        host: '',  // ip地址
        auth: '', //可以随便起
        port: ,  // 端口
        user: '', //用户名
		pass: '' //密码
    },
    publicPath: '/dist/',   // 本地程序编译好路径
}

/**
 * 清除本地程序编译好的路径目录文件
 */
const del = require('del')
gulp.task('clean', ['upload'], function(callback) {
    console.log('## 已经成功部署到服务器上')
    console.log('## 清除原来编译的代码')
    del(['.' + config.publicPath], callback)
})


/**
 * 部署到测试环境
 */
gulp.task('upload', function(callback) {
    console.log('## 正在部署到测试服务器上')
    var dev = config.uploadTest
    gulp.src('.' + config.publicPath + '**')
        .pipe(ftp(Object.assign(dev, { callback })))
})

gulp.task('uploadTest', ['upload', 'clean'])

然后我们在package.json里面

scripts里面新添加一个

 "upfiletest": "npm run build && gulp uploadTest"

之后通过npm run upfiletest,就可以同时打包并且上传了