前端項目在部署時一般的操作是運(yùn)行打包命令，然后通過ftp或者finalShell等工具連接服務(wù)器，把dist目錄下的文件拖到指定的目錄下，完成項目的部署。

今天介紹一個實(shí)用的工具----gulp，可以讓我們省去這一步，實(shí)現(xiàn)項目的自動化部署。

項目中安裝

npm i gulp gulp-ssh -save-dev

目錄下新建/gulpConfig/index.js文件

const?config = {
????"ssh": {
????????"test": {
????????????"host": "100.100.100.xxx",
????????????"port": "22",
????????????"username": "root",
????????????"password": "xxxx"
????????},
????????"prod": {
????????????"host": "200.200.200.xxx",
????????????"port": "22",
????????????"username": "root",
????????????"password": "xxxxx"
????????}
????}
}

module.exports = config;

根目錄下新建gulpfile.js

var?gulp = require("gulp");
var?GulpSSH = require("gulp-ssh");
var?config = require("./gulpConfig").ssh;
// 需要上傳到服務(wù)器的路徑
const?staticPath = "/usr/share/xxxx/xxxxx";

var?gulpTestSSH = new?GulpSSH({
??ignoreErrors: false,
??sshConfig: config.test,
});

var?gulpProdSSH = new?GulpSSH({
??ignoreErrors: false,
??sshConfig: config.prod,
});

// 刪除test服務(wù)器上現(xiàn)有文件...
gulp.task("cleanTest", function() {
??return?gulpTestSSH.shell(`rm -rf ${staticPath}`);
});

// 刪除prod服務(wù)器上現(xiàn)有文件...
gulp.task("cleanProd", function() {
??return?gulpProdSSH.shell(`rm -rf ${staticPath}`);
});

// dist 上傳文件到test服務(wù)器
gulp.task(
??"push-to-test",
??gulp.series("cleanTest", function() {
????return?gulp.src(["./dist/**"]).pipe(gulpTestSSH.dest(staticPath));
??})
);

//上傳到prod服務(wù)器
gulp.task(
??"push-to-prod",
??gulp.series("cleanProd", function() {
????return?gulp.src(["./dist/**"]).pipe(gulpProdSSH.dest(staticPath));
??})
);

gulp.task(
??"toTest",
??gulp.series("push-to-test", done?=>?{
????console.log("upload done!");
????done();
??})
);

gulp.task(
??"default",
??gulp.series("push-to-prod", done?=>?{
????console.log("upload done!");
????done();
??})
);

package.json里添加gulp命令

"scripts": {
????"serve": "vue-cli-service serve --mode dev",
????"build:test": "vue-cli-service build --mode test",
????"build:prod": "vue-cli-service build --mode prod",
????"gulp:prod": "vue-cli-service build --mode prod && gulp",
????"gulp:test": "vue-cli-service build --mode prod && gulp toTest",
????"gulp": "gulp"
??},

這里只配置了以下三種命令：

打包并上傳至測試服務(wù)器

npm run gulp:test

打包并上傳至生產(chǎn)服務(wù)器

npm?run gulp:prod

把dist目錄中的文件上傳至生產(chǎn)服務(wù)器

npm?run gulp

效果

自動完成了打包和部署！非常方便！

有用的知識又增多了。

總結(jié)

以上是生活随笔為你收集整理的vue部署到服务器_利用Gulp实现代码自动化部署的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。