利用Gulp实现代码自动化部署
前端项目在部署时一般的操作是运行打包命令，然后通过ftp或者finalShell等工具连接服务器，把dist目录下的文件拖到指定的目录下，完成项目的部署。
今天介绍一个实用的工具----gulp，可以让我们省去这一步，实现项目的自动化部署。
项目中安装
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;
// 需要上传到服务器的路径
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服务器上现有文件...
gulp.task("cleanTest", function() {
return gulpTestSSH.shell(`rm -rf ${staticPath}`);
});
// 删除prod服务器上现有文件...
gulp.task("cleanProd", function() {
return gulpProdSSH.shell(`rm -rf ${staticPath}`);
});
// dist 上传文件到test服务器
gulp.task(
"push-to-test",
gulp.series("cleanTest", function() {
return gulp.src(["./dist/**"]).pipe(gulpTestSSH.dest(staticPath));
})
);
//上传到prod服务器
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"
},这里只配置了以下三种命令：
打包并上传至测试服务器
npm run gulp:test打包并上传至生产服务器
npm run gulp:prod把dist目录中的文件上传至生产服务器
npm run gulp效果
自动完成了打包和部署！非常方便！
有用的知识又增多了。