基於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～～～是否是很簡單呢～～～你們一塊兒愉快的「懶」起來吧！！！