基于gulp自动化打包流程

背景：

为何要搞自动化呢？由于项目上测试环境的时候，频繁打包，有时候若是bug等级高的话，就算是改一处代码也要打包一版，打完包把svn上原来的项目删除，再把新的包上传到svn，这个步骤太繁琐了，若是项目大的话，打包的时间还长，等的很焦急啊，我这么懒的一我的，少等一下是一下，能少写一行代码毫不多写一行，so看到同事用，本身也去学习了一下，以前一直以为可能比较难，但是写完以后真的就是炒鸡简单又好用呀，因此写个博客记录一下喽～～～～～～

预备知识：

1. gulp的基本用法（em，对的，基本用法就够了）

   （1）做为项目的开发依赖安装

   $ npm install --save-dev gulp
   复制代码

   （2）在项目的根目录下建立一个名为***gulpfile.js***的文件，必须是这个名，否则项目中识别不了这个gulp文件哦～

   var gulp = require('gulp');
   gulp.task('default', function() {
       // 将你的默认的任务代码放在这
   });
   复制代码

   （3）运行gulp

   $ gulp
   复制代码

2. SVN经常使用命令（从svn上删除，再push进去，svn delete和svn import足够了）

   （1）删除文件

   svn delete path -m “delete test fle“
   复制代码

   （2）import 到 svn

   svn import -m "import test" 引入文件路径 目标svn路径 --username（后面加上登录svn名字） --password（后面加上登录svn密码)  
   复制代码

ok，那让咱们一块儿来看代码吧！！！

package.json

{
   "scripts":{
  	"buildSvn": "gulp clean && npm run build && npm run push",
  	"push": "bash build.sh"
    }
  }
复制代码

先让咱们看一下package.json里面执行什么命令吧，其实就一个命令buildSvn, 它执行的顺序分别是：

1. gulp clean⇒删除根目录下已有的dist文件夹

2. npm run build⇒执行了vue-cli项目自带的打包命令打包各个文件

3. npm run push⇒执行bash build.sh文件

gulpfile.js

const gulp = require('gulp')
const del = require('del')
const zip = require('gulp-zip')
const minimist = require('minimist')
function nowDate() { // 获取当前时间****年**月**日**时**分
  const date = new Date()
  const year = `${date.getFullYear()}年`
  const month = `${format(date.getMonth() + 1)}月`
  const day = `${format(date.getDate())}日`
  const hour = `${format(date.getHours())}时`
  const minute = `${format(date.getMinutes())}分`
  return `${year}${month}${day}${hour}${minute}`
}
function format(s) { // 若是1月变成01月(格式转换)
  if (String(s).length < 2) {
    return `0${s}`
  }
  return s
}
gulp.task('clean', async () => { // 删除根目录下已有的dist文件夹
  await del(['./dist/**/*'])
})
const zipOptions = { // 设置默认起名为`dist${nowDate()}.zip`
  string: 'name',
}
 const options = minimist(process.argv.slice(2), zipOptions) // 解析命令行
gulp.task('zip', () => gulp.src('dist/**/*') // 打包哪一个文件呢?打包的文件路径
		.pipe(zip(options.name || `./dist/dist${nowDate()}.zip`)) // 打包出来的文件名,若是用户输入了则用输入的,不然新建dist${nowDate()}.zip文件
		.pipe(gulp.dest('./'))) // 放在./dist下面
复制代码

引入的文件

const del = require('del') ⇒其实在这里可用可不用，不用的话能够用node自带删除文件模块，它的功能是支持多个文件的删除以及能够匹配正则表达式，好比说某个文件夹有要删除的文件和不想要删除的文件的时候，它就发挥做用了，eg：

var gulp = require('gulp');
var del = require('del');

gulp.task('clean:mobile', function (cb) {
  del([
    'dist/report.csv',
    // 这里咱们使用一个通配模式来匹配 `mobile` 文件夹中的全部东西
    'dist/mobile/**/*',
    // 咱们不但愿删掉这个文件，因此咱们取反这个匹配模式
    '!dist/mobile/deploy.json'
  ], cb);
});
gulp.task('default', ['clean:mobile']);
复制代码

const zip = require('gulp-zip') ⇒打包压缩文件

const minimist = require('minimist') ⇒轻量级的命令行参数解析引擎，eg：

// test.js
// var args = require('minimist')(process.argv.slice(2));
// console.log(args.hello);

var args = require('minimist')(process.argv.slice(2)， {
    string: ["hello"]
});
console.log(args.hello);

// $ node test.js --hello=world
// world
// $ node test.js --hello world
// world
// $ node test.js --hello
// true 注意：不是空字符串而是true
$ node test.js --hello world
// world
$ node test.js --hello
// ""
复制代码

build.sh

#!/bin/sh // 使用sh解释器来解释shell脚本
svnpath=http://   svn上传路径
svnusername=   登陆名
svnpassword=    登陆密码
svn delete ${svnpath}/index.html ${svnpath}/static -m "删除文件" --username ${svnusername} --password ${svnpassword}
svn import -m "打包" ./dist ${svnpath} --username ${svnusername} --password ${svnpassword}
复制代码

#!/bin/sh 和 #!/bin/bash的区别是什么呢？对于脚本的实际运行有什么影响呢？

// test.sh

#!/bin/sh
source pcy.sh //(#pcy.sh并不存在)
echo hello

// 执行./test.sh
// 输出为 source不执行,后面的代码也执行不了,程序中止了,不会打印hello
// ./test.sh: line 2: pcy.sh: No such file or directory

// test.sh

#!/bin/bash
source pcy.sh //(#pcy.sh并不存在)
echo hello

// 执行./test.sh
// ./test.sh: line 2: pcy.sh: No such file or directory hello
// source不执行,可是打印hello
// 执行sh ./test.sh
// 输出为 source不执行,后面的代码也执行不了,程序中止了,不会打印hello
// ./test.sh: line 2: pcy.sh: No such file or directory
复制代码

因此为何会有这个区别呢?

1.sh通常设成bash的软链[work@zjm-testing-app46 cy]$ ll /bin/shlrwxrwxrwx 1 root root 4 Nov 13 2006 /bin/sh -> bash

2.在通常的linux系统当中（如redhat），使用sh调用执行脚本至关于打开了bash的POSIX标准模式3. 也就是说 /bin/sh 至关于 /bin/bash --posix因此，sh跟bash的区别，实际上就是bash有没有开启posix模式的区别。

so～～～是否是很简单呢～～～你们一块儿愉快的“懒”起来吧！！！