如何構建一個高效的開發流程

時間小魚發表於2018-12-31

背景

不知道各位出包流程是否一樣，反正我這邊現狀是每次後端要包，都需要打一個包，然後壓縮並通過企業微信傳送。或者迭代出包，首先打包，打完包之後壓縮通過郵件傳送給測試，並要重新命名每一個檔案的名字，比如名字為迭代版本 + 年月日時分。這樣的流程非常繁瑣，每次走這個流程都十分難受。那麼，我們是如何通過技術來去掉這個痛苦的過程？

起步

首先，我們先分析一下，後端需要包，是通過企業微信給出去，測試則通過郵件，那麼我們先統一通過郵件給包。打包之後，需要壓縮，再郵件。壓縮我們可以通過 gulp-zip 完成，郵件我們可以通過 node 來傳送。

壓縮

我們已經知道可以通過 gulp-zip 來處理壓縮資料夾，這個時候，我們要先熟悉一下 gulp 的 API，然後熟悉 gulp-zip 的 API，最後使用它。

gulp

gulp 是一個自動化構建工具，它可以增強你的工作流程，它擁有易於使用、構建快速、外掛高質和易於學習這四個特性。我們可以通過 gulp 外掛實現前端程式碼的編譯、壓縮、測試；圖片的壓縮；瀏覽器的自動重新整理，還有很多外掛可以在這裡查詢。

  1. gulp.src() 在這裡傳入需要處理的檔案路徑，可以是多個檔案以陣列的形式[main.css, vender.css]，也可以傳入正則 **/*.css。

  2. gulp.task() 建立任務，可以通過 gulp 任務名稱來執行此任務。

  3. gulp.dest() 生成檔案的路徑。如果某資料夾不存在，將會自動建立它。

gulp-zip

gulp-zip 的使用方式十分簡單，我們直接上個 demo 看下。這裡，我們首先獲取到 gulp 和 zip，然後取到 src 目錄下的所有檔案，把他們進行壓縮成 archive.zip 檔案，然後把這個檔案放到 dist 目錄下。

const gulp = require('gulp');
const zip = require('gulp-zip');

gulp.task('default', () =>
    gulp.src('src/*')
        .pipe(zip('archive.zip'))
        .pipe(gulp.dest('dist'))
);
複製程式碼

瞭解了 gulp 和 gulp-zip 的一些用法，我們來編寫壓縮的程式碼。在這段程式碼裡，我們首先獲取到當前的時間，然後取出 webpack/dest/ 目錄下所有檔案，壓縮成一個名叫 V2018.12.4-201812201430，最後把這個檔案放到 dest 目錄下。

gulp.task('zip', ()=>{
    let time = moment().format('YYYYMMDDTHH:mm');
    gulp.src(`./webpack/dest/**`)
        .pipe(zip(`V${version}-${time}.zip`))
        .pipe(gulp.dest(`${__dirname}/dest/`));
});
複製程式碼

郵件

我們的檔案已經壓縮到特定目錄了，我們需要去這個目錄下，讀取此檔案，然後當做附件給傳送出去。當然，傳送出去也需要傳送人和收件人，這一塊該怎麼做呢？筆者特定去查了下，發現 github 裡的 nodemailer 很符合我的預期。那我們一起來看下如何使用 nodemailer 來傳送一個郵件。

nodemailer 是 Node.js 應用程式的一個模組，它可以很便捷的傳送一封電子郵件，並且它是一個基於 MIT 開源的一個專案。

1.我們首先安裝 nodemailer。

npm i nodemailer
複製程式碼

2.我們來看一下 Demo

'use strict';
const nodemailer = require('nodemailer');
// 生成一個 SMTP 的服務賬號
nodemailer.createTestAccount((err, account) => {
    // 使用預設的 SMTP 傳輸建立可重用的傳輸物件
    let transporter = nodemailer.createTransport({
        host: 'smtp.ethereal.email',
        port: 587,
        secure: false,
        auth: {
            user: account.user, // 賬號
            pass: account.pass // 密碼
        }
    });

    // 設定郵件配置項
    let mailOptions = {
        from: '"Fred Foo ?" <foo@example.com>', // 傳送者
        to: 'bar@example.com, baz@example.com', // 接收郵件列表
        subject: 'Hello ✔', // 主題
        text: 'Hello world?', // 文字
    };

    // 傳送郵件
    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            return console.log(error);
        }
    });
});
複製程式碼

3.我們發現根據網上 Demo 已經可以實現傳送郵件了，但是我們現在還需要附件。我們通過查詢 nodemailer 的 API 發現，可以通過下面的方法來實現。

fs.readdir(dirPath, function (err, files) {
    // 讀取附件資訊
    let attachments = _.map(files, fileName=>{
        return {
            filename: fileName,
            content: fs.readFileSync(`${dirPath}/${fileName}`)
        };
    });
    // 傳送郵件
    let mailOptions = {
        from: sendEmail,
        to: receiveUser,
        subject: '更新包',
        text: `如下，為${version}迭代更新包`,
        attachments
    };
    transporter.sendMail(mailOptions, (err, info)=>{
        if(!_.isNull(err)){
            console.log(err);
        }
    });
})
複製程式碼

結束

相信大家看完， 對於這一塊的使用都十分了解，以後再遇到這種場景就十分舒服了，我們只需要執行一個命令，就可以搞定出包流程，再也不必投入人力到壓縮檔案、重新命名檔案、拖動檔案到企業微信、選擇人、傳送這個繁瑣又無樂趣的重複流程中。

相關文章