vue-cli3-command

本文旨在让小白vue/node打字员，也可以通过在原vue-cli3脚手架的基础上，在build打包后，通过node来执行shell命令，来执行后续需要人工按一定规则来处理的：（新建、命名、压缩、拷贝、移动、删除）文件和文件夹及上传至svn、git、server等（如有新的需要可在issues中提，此脚本也可以自行添加技能，新技能可共享在issues，一生二，二生三，三生万物）

当然此不局限与vue-cli3脚手架，基于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",

使用

工具在使用前，需要按需配置，自行新增技能也可以在此配置文件中添加配置项。

配置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 compressing = require('compressing'); //压缩模块
const Client = require('ssh2').Client; //上传服务器模块
const fs = require('fs') //读写文件
const path = require('path');
const zlib = require("zlib"); //gzip压缩

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() {}
	//gzip压缩
	gzip(source) {
		let t = this;
		// 处理输入和输出的文件路径
		//		let sourcePath = path.join(__dirname, source);
		let sourcePath = source;
		let gzipPath = `${sourcePath}.gz`;
		// 创建转化流
		let gzip = zlib.createGzip();
		// 创建可读流
		let rs = fs.createReadStream(sourcePath);
		// 创建可写流
		let ws = fs.createWriteStream(gzipPath);
		// 实现转化
		rs.pipe(gzip).pipe(ws);
	}
	//改造index.html，在index.html中添加项目版本号功能
	changHTML() {
	    let t=this;
		console.log("开始改造index.html")
		//删除为改造的index.html.gz压缩包
		exec(`rm -rf ${t.projectName}/index.html.gz`, function(err1) {});
		//改造index.html，在<link rel="icon" href="<%= BASE_URL %>favicon.ico" v="%version%">中将%version%替换成版本号加日期
		fs.readFile(`${t.projectName}/index.html`, 'utf8', function(err, files) {
			//console.log(files)
			var result = files.replace(/%version%/g, `${version}_${t.time_stamp}`);

			fs.writeFile(`${t.projectName}/index.html`, result, 'utf8', function(err) {
				if(err) return console.log(err);
			});
			//将改造好的index.html重新压缩成gz包
			t.gzip(`${t.projectName}/index.html`);
		});
	}
	// zip压缩命令
	compress() {
		let t = this;
		exec(`mkdir zipDir`, function(err) {
			//改造index.html，在index.html中添加项目版本号功能
			t.changHTML();
			//此处第一个参数为要打包的目录, 第二个参数是打包后的文件名
			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) {
					console.log("开始执行上传svn的命令")
					t.uploadSVN()
				}
				//上传到git
				if(config.git.enable) {
					t.uploadGit()
				}
				//上传到服务器
				if(config.server.enable) {
					t.uploadServer()
				}
			})
		})

	}
	//触发执行命令
	init() {
		let t = this;
		console.log("开始执行项目包压缩命令")
		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();
			})
		}
	}
}

const command = new Command();
command.init();

功能

1.changeHTML 改造index.html，在index.html中添加项目版本号功能

changHTML() {
   	console.log("开始改造index.html")
   	//删除为改造的index.html.gz压缩包
   	exec(`rm -rf ${t.projectName}/index.html.gz`, function(err1) {});
   	//改造index.html，在<link rel="icon" href="<%= BASE_URL %>favicon.ico" v="%version%">中将%version%替换成版本号加日期
   	fs.readFile(`${t.projectName}/index.html`, 'utf8', function(err, files) {
   		//console.log(files)
   		var result = files.replace(/%version%/g, `${version}_${t.time_stamp}`);

   		fs.writeFile(`${t.projectName}/index.html`, result, 'utf8', function(err) {
   			if(err) return console.log(err);
   		});
   		//将改造好的index.html重新压缩成gz包
   		t.gzip(`${t.projectName}/index.html`);
   	});
   }

2.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()
			}
		})
	})
}

 3.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，如下图

后续功能会逐步添加，也可以在issues或者群里找我

有建议或问题可以加群qq交流535798405

github.com/trsoliu/vue…

基于vue-cli3脚手架，后处理工程自动化脚本

vue-cli3-command

安装

使用

功能

执行