gulp自动化上传

在使用vue编译后需要上传到服务器，之前用的sftp客户端来上传，比较麻烦。现在使用gulp实现自动化部署。

npm install --save-dev gulp-zip
npm install --save-dev dateformat
npm install --save-dev gulp
npm install --save-dev gulp-sftp-up4
npm install --save-dev gulp-clean
npm install -g gulp

使用到的主要是gulp和gulp-ssh

直接上代码

我们是直接打包出对应包加时间戳。自动上传，得到当前包的区分。

const gulp = require('gulp')
const zip = require('gulp-zip')
const dateFormat = require('dateformat')
const sftp = require('gulp-sftp-up4')

const pump = require('pump') // pipe方法：gulp中常出现的pipe方法是来自nodejs stream API的，并不是gulp本身源码所定义的。pipe方法的参数是一个function，这个function作用是接受上一个流（stream）的结果，并返回一个处理后流的结果。pipe方法不容易检查到错误，之后会用pump模块来代替pipe。
const clean = require('gulp-clean')
let folderName = require('./package.json').name
let path = require('path')
let fs = require('fs')
let now = new Date()
let files = fs.readdirSync(path.resolve(__dirname, './dist'))
const originalZip = dateFormat(now.getTime() + 30000, 'yyyymmddHHMM')

//区分是gray还是uat的文件名称
function checkFile(type) {
	files.forEach(function(file) {
		if (file.indexOf(folderName) > -1 && !hasTimestamp(file) && file.indexOf(type) > -1) {
			folderName = file.replace('.zip', '')
		}
	})
}
// 匹配时间戳的正则表达式，这里假设时间戳是10位数
function hasTimestamp(str) {
	var regex = /\d{10}/
	return regex.test(str)
}
// 删除本地文件 灰度环境
gulp.task('cleangray', function(done) {
	pump([
		gulp.src('./dist/*.zip'),
		clean()
	])
	checkFile('gray')
	done()
})
// 预发环境
gulp.task('cleanuat', function(done) {
	pump([
		gulp.src('./dist/*.zip'),
		clean()
	])
	checkFile('UAT')
	done()
})
// 正式环境
gulp.task('clean', function(done) {
	pump([
		gulp.src('./dist/*.zip'),
		clean()
	])
	checkFile()
	done()
})
// generate zip for production
gulp.task('zip', function() {
	if (folderName.indexOf('xa') === -1) {
		return gulp.src('dist/' + folderName + '/**/*', { base: 'dist' })
			.pipe(zip(`${originalZip}` + folderName + '.zip'))
			.pipe(gulp.dest('dist'))
	}
})
gulp.task('up', function(done) {
	if (folderName.indexOf('xa') === -1) {
		deploy()
	}
	done()
})
// 以下功能为线上打包需上传两份压缩包（一份没有html，一份只有html）
let fileName = '',noHtmlZipName = '',onlyHtmlZipName = ''
function checkOtherHtml(){
	fileName = files.find(v => !v.includes('.zip') && v.indexOf(folderName) > -1)
	const noHtmlZip = dateFormat(now.getTime() + 60000, 'yyyymmddHHMM')
	const onlyHtmlZip = dateFormat(now.getTime() + 60000 * 2, 'yyyymmddHHMM')
	 noHtmlZipName = `${noHtmlZip}${fileName}.zip`
	 onlyHtmlZipName = `${onlyHtmlZip}${fileName}.zip`
}
gulp.task('checkOtherHtml',function(done){
	checkFile()
	checkOtherHtml()
	done()
})
gulp.task('zipNoHtml', function(done) {
	if (folderName.indexOf('xa') === -1) {
		return gulp.src([`dist/${fileName}/**/*`, `!dist/${fileName}/**/{,/**/*.html}`], {
				base: 'dist'
			})
			.pipe(zip(noHtmlZipName))
			.pipe(gulp.dest('dist'))
	}
	done()
})

gulp.task('zipOnlyHtml', function(done) {
	if (folderName.indexOf('xa') === -1) {
		return gulp.src([`dist/${fileName}/**/*`, `!dist/${fileName}/public{,/**}`,
				`!dist/${fileName}/**/{,/**/!(*.html)}`
			], {
				base: 'dist'
			})
			.pipe(zip(onlyHtmlZipName))
			.pipe(gulp.dest('dist'))
	}
	done()
})
gulp.task('up2', function(done) {
	if (folderName.indexOf('xa') === -1) {
		return gulp.src([`dist/*${noHtmlZipName}`, `dist/*${onlyHtmlZipName}`], { base: 'dist' })
			.pipe(sftp({
				host: 'xxxx.xxxxx.top',
                port: 22,
                username: 'xxxx',
                password: 'xxxxx',
		        // 服务器密码,
				timeout: 100000
			}))
	}
	done()
})



gulp.task('runSequenceGray', gulp.series('cleangray', 'zip', 'up'))
gulp.task('runSequenceUat', gulp.series('cleanuat', 'zip', 'up'))
gulp.task('runSequence', gulp.series('clean', 'zip', 'up'))

gulp.task('gray', gulp.series('runSequenceGray', function(done) {
	done()
}))
gulp.task('UAT', gulp.series('runSequenceUat', function(done) {
	done()
}))
gulp.task('formal', gulp.series('runSequence', function(done) {
	done()
}))
gulp.task('np',gulp.series('checkOtherHtml','zip','zipNoHtml', 'zipOnlyHtml','up2',function(done){
	console.info(`没有html：${noHtmlZipName}\n只有html：${onlyHtmlZipName}`)
	done()
}))
// 上传服务
async function deploy() {
	const distPath = ['dist/*' + `${originalZip}${folderName}` + '.zip']
	const ftpConfig = {
		remotePath:'xxxx/h5/', // 本地待传输文件夹
		host: 'xxxx.xxxxx.top',
        port: 22,
        username: 'xxxx',
        password: 'xxxxx',
		// 服务器密码
	}

	gulp.src(distPath)
	.pipe(sftp(ftpConfig))
}
exports.deploy = deploy

上传服务器包名字为：202311151739-app-UAT

分别灰度环境、UAT、正式环境。