星期一, 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/

星期四, 3月 24, 2016

全栈大咖分享II:Angular JS 2.0 初探 (簡易記錄)

上星期,非常有榮幸,受到上海 GDG(Google Developer Group)的負責人之一個 Mike 邀請,到了上海市的華鑫慧享會議中心去分享 Angular 2.0。這一場距離上一場的的分享,大約一個月左右,我準備了更多的內容在這次的分享中,把上一場一些學員的 feedback 也加進去了,包括 TypeScript 概述還有比較偏實務的的語法部分都納進去了,隨著 Angular 2.0 的 first release 越來越接近,我相信大家也非常期待,當然這裡也把 slide 和 resource 丟出來,讓大家在學習上有更多的資源...

活動連結
https://goo.gl/WSczg0

活動照片




Slide
http://www.slideshare.net/BibbyChung/angular20shanghai0319

有啥問題大家在討論吧!

星期一, 2月 22, 2016

Angular 2.0 (Study4Love 為愛而學,為愛貢獻 - 台中場)

今天當任的「Study4Love 為愛而學,為愛貢獻 - 台中場」的「Angular 2.0 」的講師,發現大家對於 Angular 2.0 的到來又期待又怕受傷害,目前 Angular 2.0 仍然是 beta 版中,用於 production 開發實屬不妥,但如果目前新專案導入 Angular 1.0,之後 Angular 2.0 正式版出現,到時再升級又怕改動很大,我只能說!這就是一種取捨問題,沒有絕對答案,就看各位決策者個修為了 XD...

這裡提供 slide 及範例給大家參考

slide



demo

https://github.com/BibbyChung/ng2_seminar