星期一, 6月 13, 2016

Gulp 自動化工具

在之前的文章中,"寫支 console application 來更新 svn 的版本號 "這篇文章提到要怎麼把 SVN 的版本號加到發佈的專案中,這個方法 Bibby 已經很久沒用了,一來是 Bibby 電腦已經用 MAC 了,二來現在有更方便的工具可以讓我使用,當然同樣的方法也是可以繼續使用,就把裡面的 Command Line 改一下就可以了

所以這篇文章我大概分享一下,我怎麼處理發行網站後要做的一些麻煩的事情

使用工具:

Gulp 是一個自動化和加強工作流(Automate and Enhance Your Workflow)的一個工具

安裝(terminal mode):


$ npm install -g gulp

注意:記得要先裝 nodejs 在電腦裡,這樣才有 npm 這 command 可以用

使用:

在專案下建立一個 gulpfile.js 的檔案,這檔案的內容就是一個 javascript,所以只要你會寫 javascript 就可以很容易輕鬆的把你要執行的 script 寫出來,照你想要的方式去執行

-- 基本 --

gulpfile.js


var gulp = require('gulp');

gulp.task('test', function () {
    console.log('my first gulp script');
});

Terminal 執行,可就可以跑出上列的文字了


$ gulp test

-- 加入 git 版本資訊到特定目錄下 --


var gulp = require("gulp");
var shell = require("gulp-shell");

gulp.task('gitVersion', shell.task([

    'git rev-parse --short HEAD > "./wwwroot/gitVersion.txt"'

]));

這樣就可以很輕鬆的知道目前在 production 或是 staging 上的 git 版本是哪個版號了

注意:環境要已經裝了 git 才可以執行這一段 code

-- 刪除不需要的檔案 --


var gulp = require("gulp");
var rimraf = require("rimraf");
var Q = require("q");

var deletePathAsync = function (str) {

    var deferred = Q.defer();
    rimraf(str, function (err) {
        if (err)
            deferred.reject(err);
        else
            deferred.resolve();
    });
    return deferred.promise;

};

gulp.task("cleanTempFiles", function (cb) {

    deletePathAsync("./src/Core/xxx")
        .fin(function () {
            cb();
        });
});

這樣就很簡單的把一些暫存檔刪除了

注意:npm 要裝 Q 和 rimraf 這兩個套件

總結:

為什麼會選擇 gulp 來當我的管理工具有幾個重點
  1. Gulp 是根據 Node.js  寫出來的工具,Node.js 可以裝在任何的系統,所以 Gulp 理論上也是跨系統的
  2. Gulp 已經是非常成熟的自動化管理工具,包山包海的套件可以使用,大部分的套件人家都幫你寫好了,所以可以節省很多時間
  3. Gulp 的設定檔是一個 js 檔案,這個是我最喜歡的部份,因為設定檔是 js ,就可以用程式的方法去撰寫管理設定檔,大家都知道當專案上線的時候,設定檔真的都是包山包海的,好的撰寫方式跟容易管理是我非常注重的一個地方

番外篇:


如果使用 Visual Studio 2015 來開發程式的,那就不需要開啟 Terminal,在 Visual Studio 2015 的 Task Runner 那邊設定好編譯後執行,這樣就簡單的完成此功能需求



參考:
http://blog.ccjeng.com/2015/08/Gulp.html
https://kejyuntw.gitbooks.io/gulp-learning-notes/content/install/Install-README.html
http://gulpjs.com/