基於vue-cli3腳手架,後工程自動化腳本

vue-cli3-command

本文旨在讓小白vue/node打字員,也能夠經過在原vue-cli3腳手架的基礎上,在build打包後,經過node來執行shell命令,來執行後續須要人工按必定規則來處理的:(新建、命名、壓縮、拷貝、移動、刪除)文件和文件夾 及 上傳至svn、git、server等(若有新的須要可在issues中提,此腳本也能夠自行添加技能,新技能可共享在issues,一輩子二,二生三,三生萬物)vue

固然此不侷限與vue-cli3腳手架,基於node遷移和拓展也很簡單。node

trsoliu README.md

安裝

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 buildnode ./command/process.js,以下圖github

後續功能會逐步添加,也能夠在issues或者羣裏找我web

有建議或問題能夠加羣qq交流535798405vue-cli

github.com/trsoliu/vue…shell

相關文章
相關標籤/搜索