一、背景
最近在多個(gè)項(xiàng)目上線部署過程中稼虎，發(fā)現(xiàn)每一次打包到測(cè)試環(huán)境或者開發(fā)環(huán)境中，都需要手動(dòng)打包后再把代碼拷貝到遠(yuǎn)程服務(wù)文件中招刨，偶爾出現(xiàn)放錯(cuò)地方霎俩，被測(cè)試叼死了。最近在摸魚過程中，利用了gulp來代替我手賤的行為打却，簡(jiǎn)易實(shí)現(xiàn)打包部署一步到位杉适，真香。柳击。猿推。
二、實(shí)現(xiàn)思路
我們?cè)趘ue項(xiàng)目構(gòu)建完成后會(huì)在項(xiàng)目根目錄生成一個(gè)dist目錄捌肴，只需要將該目錄下的文件上傳到服務(wù)器的web容器即可訪問蹬叭。我們要做的就是通過命令行將dist目錄下所有文件上傳到服務(wù)器對(duì)應(yīng)的目錄下。
三状知、實(shí)現(xiàn)步驟
1秽五、安裝gulp和gulp-sftp
npm i gulp gulp-sftp --save-dev
2、在項(xiàng)目根目錄新建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: `服務(wù)器對(duì)應(yīng)存放web的目錄`
}))
})
主要是通過gulp去創(chuàng)建這個(gè)任務(wù)名test饥悴，然后通過gulp-sftp連接后轉(zhuǎn)化為流上傳到指定目錄坦喘，代碼中的test，是可以自定義的西设，用于gulp區(qū)分任務(wù)的名稱瓣铣，也可以同時(shí)配置多個(gè)任務(wù)。
3济榨、優(yōu)化
如果我們直接把服務(wù)器的賬號(hào)和密碼直接寫在代碼中坯沪，很容易瀨野的哦绿映！所以我們可以創(chuàng)建``gulp-sftp配置文件.ftpPass```擒滑，為了保證ftp賬號(hào)安全，將FTP賬號(hào)密碼配置放在單獨(dú)的文件中叉弦，禁用掉在版本控制中使用丐一。
4、配置打包命令
對(duì)于gulp配置已經(jīng)完成了淹冰，接下來就是打包后上傳的操作了库车，我們可以在package.json文件中增加
"scripts": {
"build": "vue-cli-service build && gulp test",
"gulp": "gulp test"
},
如果你想打包后自動(dòng)上傳，直接把命令寫在至此我們可以使用gulp來執(zhí)行定義的上傳任務(wù)了"build": "vue-cli-service build && gulp test"就可以了樱拴。
