基於vue-cli3腳手架，後工程自動化腳本
vue-cli3-command
本文旨在讓小白vue/node打字員，也能夠經過在原vue-cli3腳手架的基礎上，在build打包後，經過node來執行shell命令，來執行後續須要人工按必定規則來處理的：（新建、命名、壓縮、拷貝、移動、刪除）文件和文件夾 及 上傳至svn、git、server等（若有新的須要可在issues中提，此腳本也能夠自行添加技能，新技能可共享在issues，一輩子二，二生三，三生萬物）vue
固然此不侷限與vue-cli3腳手架，基於node遷移和拓展也很簡單。node
安裝
1.以下圖，在用vue-cli3搭建的項目中，將command文件放置與node_modules平行
複製代碼
2.安裝依賴包
$ npm install child_process ssh2 compressing --save
複製代碼
3.在package.json配置命令，以下圖
"build-command": "vue-cli-service build && node ./command/process.js",
複製代碼
使用
工具在使用前，須要按需配置，自行新增技能也能夠在此配置文件中添加配置項。git
配置command.config.js，配置內容以下：
複製代碼
/** * github:trsoliu trsoliu@gmail.com 2019-05-30 * 配置文件 用於配置命令行文件 * */
module.exports = {
config:{
/** * 打包的文件名稱，不含版本號和日期號，此爲解壓部署包名稱， * 此項爲空則啓用vue.config.js中outputDir來配置， * 若outputDir爲空則啓用package.json中name來配置 * */
projectName: "vue-cli3-command",
/** * 配置上傳到svn的參數 * */
localPackage:{
//是否啓用保留版本到本地，慎重！！！，一旦關閉以前的版本壓縮包都會被清除
enable: true,
dirName:"localPackageVersion"
},
//是否保留原打包文件夾、文件
keepBuildDir:true,
/** * 須要先去在控制檯作永久svn受權 * 預先設置上傳ignore的文件 如：在svn全局config中配置global-ignores 添加 node_modules localPackage dist 等文件 * **/
svn: {
//是否啓用上傳svn
enable: true,
//部署版本包 上傳 路徑
deploymentPackagePath: "https://XX@svn.XX.com:111/svn/XX/workspace/Tags/webTags/project-version/vue-cli3-command",
//源碼版本包 上傳 路徑
sourceCodePackagePath: "https://XX@svn.XX.com:111/svn/XX/workspace/Tags/webTags/project-version-source/vue-cli3-command"
},
git: {
//是否啓用上傳git
enable: false,
//部署版本包 上傳 路徑
deploymentPackagePath: "",
//源碼版本包 上傳 路徑
sourceCodePackagePath: ""
},
server: {
//是否啓用上傳server
enable: false,
//部署版本包 上傳 路徑
deploymentPackagePath: "",
//sourceCodePackagePath: "",
host: "112.110.10.100", // 服務器地址
username: "root111", // 用戶名
password: "123131321"
}
}
}
複製代碼
技能執行文件，以下
複製代碼
/** * github:trsoliu trsoliu@gmail.com 2019-05-30 * 配置文件 用於配置命令行文件 * */
const {
exec
} = require('child_process'); //調用shell命令模塊
const {
Client
} = require('ssh2'); //上傳服務器模塊
const compressing = require('compressing'); //壓縮模塊
const {
config //命令配置的參數
} = require("./command.config.js");
const {
outputDir //項目名稱 ****查看vue.config.js中是否有此項
} = require("./../vue.config.js");
const {
version, //項目版本
name //項目名稱
} = require('./../package.json');
const {
timeStamp //版本時間戳，默認：年月日 時分秒，此精確到秒，如需調整能夠更改timeStamp.js,如201905281607
} = require("./utils/timeStamp.js");
class Command {
constructor() {
//打包後輸入的文件夾名稱
this.output = outputDir || "dist";
/** * 優先使用command.config.js中的config.projectName配置，次使用vue.config.js中的outputDir配置，最後使用package.json中的name配置 * */
this.projectName = config.projectName || outputDir || name;
//獲取時間戳
this.time_stamp = timeStamp();
/** * 默認打包部署文件夾命名規則:[項目名稱]+"V"+[版本號]+"_"+[時間戳] ，如xxxV1.0.1_201905301512 */
this.fileName = `${this.projectName}V${version}_${this.time_stamp}`;
}
//上傳到svn
uploadSVN() {
let t = this;
//須要先去在控制檯作永久svn受權
//上傳運行的壓縮包
exec(`svn import -m "版本${t.fileName}" zipDir/ ${config.svn.deploymentPackagePath}`, (err, stdout, stderr) => {
console.log(`版本${t.fileName}上傳svn成功`)
//清除多餘版本文件
exec(`rm -rf zipDir`, () => {
//上傳源碼到svn，作版本源碼tag
exec(`svn import -m "版本${t.fileName}" ./ ${config.svn.sourceCodePackagePath}/${t.fileName}`, (err, stdout, stderr) => {
console.log(`版本${t.fileName}源碼上傳svn成功`)
})
})
})
}
//上傳到git
uploadGit() {}
//上傳到server
uploadServer() {}
// 壓縮命令
compress() {
let t = this;
exec(`mkdir zipDir`, function(err) {
//此處第一個參數爲要打包的目錄, 第二個參數是打包後的文件名
compressing.zip.compressDir(`${t.projectName}/`, `zipDir/${t.fileName}.zip`).then(() => {
//console.log('*******壓縮成功*******',config)
//判斷是否保留部署的壓縮包版本到本地
if(!!config.localPackage.enable) {
exec(`mkdir ${config.localPackage.dirName}`, function(err) {
exec(`cp -r zipDir/ ${config.localPackage.dirName}`, (err, stdout, stderr) => {})
})
} else {
exec(`rm -rf ${config.localPackage.dirName}`, function(err1) {})
}
//刪除用來作壓縮包的文件夾
exec(`rm -rf ${t.projectName}`, function(err1) {});
//上傳到svn
if(config.svn.enable) {
t.uploadSVN()
}
//上傳到git
if(config.git.enable) {
t.uploadGit()
}
//上傳到服務器
if(config.server.enable) {
t.uploadServer()
}
})
})
}
//觸發執行命令
init() {
let t = this;
if(!!config.keepBuildDir) {
//將打包好的文件複製部署文件夾中，此爲保留打包文件夾，若不想原打包文件夾能夠使用上面文件
exec(`cp -r ${t.output} ${t.projectName}`, (err, stdout, stderr) => {
t.compress();
})
} else {
//把打包後文件夾名稱爲${output}中的文件移動到${projectName}文件夾中，同時刪除原${output}文件夾
exec(`mv ${t.output} ${t.projectName}`, (err, stdout, stderr) => {
t.compress();
})
}
}
}
//new出執行對象，開始初始化執行
const command = new Command();
command.init();
複製代碼
功能
1.compress 按規則壓縮build後輸出的部署文件夾並按規則命名壓縮，如dist文件變成xxx.zip
複製代碼
// 壓縮命令
compress() {
let t = this;
exec(`mkdir zipDir`, function(err) {
//此處第一個參數爲要打包的目錄, 第二個參數是打包後的文件名
compressing.zip.compressDir(`${t.projectName}/`,`zipDir/${t.fileName}.zip`).then(() => {
//console.log('*******壓縮成功*******',config)
//判斷是否保留部署的壓縮包版本到本地
if(!!config.localPackage.enable) {
exec(`mkdir ${config.localPackage.dirName}`,
function(err) {
exec(`cp -r zipDir/ ${config.localPackage.dirName}`,
(err, stdout, stderr) => {})
})
} else {
exec(`rm -rf ${config.localPackage.dirName}`,
function(err1) {})
}
//刪除用來作壓縮包的文件夾
exec(`rm -rf ${t.projectName}`, function(err1) {});
//上傳到svn
if(config.svn.enable) {
t.uploadSVN()
}
//上傳到git
if(config.git.enable) {
t.uploadGit()
}
//上傳到服務器
if(config.server.enable) {
t.uploadServer()
}
})
})
}
複製代碼
2.uploadSVN 將壓縮後按版本規則命名的部署包上傳到svn（shell命令中，svn使用須要先去在控制檯作永久svn受權）指定的文件夾中（若是是git亦是如此）
複製代碼
//上傳到svn
uploadSVN() {
let t = this;
//須要先去在控制檯作永久svn受權
//上傳運行的壓縮包
exec(`svn import -m "版本${t.fileName}" zipDir/ ${config.svn.deploymentPackagePath}`, (err, stdout, stderr) => {
console.log(`版本${t.fileName}上傳svn成功`)
//清除多餘版本文件
exec(`rm -rf zipDir`, () => {
//上傳源碼到svn，作版本源碼tag
exec(`svn import -m "版本${t.fileName}" ./ ${config.svn.sourceCodePackagePath}/${t.fileName}`, (err, stdout, stderr) => {
console.log(`版本${t.fileName}源碼上傳svn成功`)
})
})
})
}
複製代碼
執行
經過添加功能後，經過在vue-cli3任務控制檯下，執行任務
build-command來觸發npm run build和node ./command/process.js，以下圖github
後續功能會逐步添加，也能夠在issues或者羣裏找我web
有建議或問題能夠加羣qq交流
535798405vue-cli
相關文章
- 1. JMeter 接口自動化測試（手工轉自動化腳本）
- 2. 自動化腳本
- 3. shell腳本 ----- nginx自動化腳本
- 4. shell腳本之nginx自動化腳本
- 5. 接口自動化的手腳架
- 6. tinyshop前後臺的自動化腳本
- 7. 自動化腳本框架1
- 8. swoole協程優化自動化腳本
- 9. Angular7 腳手架工程初始化
- 10. AutoHotkey 自動化腳本工具實例
- 更多相關文章...
- • Swift 下標腳本 - Swift 教程
- • 服務端腳本 指南 - 網站建設指南
- • ☆基於Java Instrument的Agent實現
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JMeter 接口自動化測試（手工轉自動化腳本）
- 2. 自動化腳本
- 3. shell腳本 ----- nginx自動化腳本
- 4. shell腳本之nginx自動化腳本
- 5. 接口自動化的手腳架
- 6. tinyshop前後臺的自動化腳本
- 7. 自動化腳本框架1
- 8. swoole協程優化自動化腳本
- 9. Angular7 腳手架工程初始化
- 10. AutoHotkey 自動化腳本工具實例