[第八屆IT邦幫忙鐵人賽] Gulp 套件介紹

前言

上一篇我們簡單介紹如何安裝 Gulp 與其基本原理,並且提供了一個minify的範例。在一篇,我們將會介紹實作 NET Core 持續整合過程中前後端所需要的基本套件。透過這些套件的使用,可以幫助我們快速完成檔案搬移、參數傳遞與指令執行...等自動化工作。除此之外,npm 網站上有許多強者提供了許多 gulp 套件提供下載使用,您可以嘗試搜尋你想要到的工具,協助您更快速完成工作。若有說明錯誤或任何建議,請各位先進不吝提出,謝謝!

這章節我們介紹的套件,包含:

  1. yarg: 提供從指令讀取參數功能
  2. gulp-clean: 清除資料
  3. gulp-sass: 將sass編譯為css
  4. 執行 powershell 指令:若真的找不到套件,powershell 會幫您很大的忙

 

介紹

yarg:

進行撰寫build script的過程中,我們需要參數於自動化工作過程中使用,像是

  1. 傳入佈署環境,如dev, qa, staging, prd,作為佈署到哪一台伺服器的依據。
  2. 傳入版本號碼,每次佈署版本號碼會遞增,透過版本號碼我們能了解目前伺服器上哪一個版本,甚至有問題的時候可以進行手動退版動作。

透過下列指令安裝yarg:

npm install --save-dev yarg

http://ithelp.ithome.com.tw/upload/images/20161209/20091494nt3hHBPeKE.png

我們利用 console.log 印出傳入參數,使用方法如下:

var gulp = require('gulp'),
    args = require('yargs').argv;

//test for args
gulp.task('testArgs', function() {
    console.log(args.buildVersion);
    console.log(args.projectName);
    console.log(args.mode);
});

然後輸入指令

gulp test --build-version 1.0.1 --ProjectName TestProject --mode release

結果如下:
http://ithelp.ithome.com.tw/upload/images/20161209/20091494cArDUmwvPS.png

`

gulp-clean:

在發佈過程中,我們通常會清除檔案進行重新發佈,避免舊檔案殘存而導致程式沒有更新的情況產生,如佈署前端程式 或靜態資料放置 CDN 的處理過程中,這個指令非常實用,過去使用MSbuild.exe 可以清除舊檔案後重新發佈,但在個人三個月前測試 Net Core 發佈過程中,發現目前 dotnet publish 並不會清理舊檔案而導致一些問題(檔案未更新與重複產生子資料夾)。

透過下列指令安裝gulp-clean:

npm install --save-dev gulp-clean

http://ithelp.ithome.com.tw/upload/images/20161210/20091494muHsZEmjfJ.png

使用方法如下:

gulp.task('cleanScriptFiles',function(){      
    gulp.src('wwwroot/Scripts/', {read: false})
        .pipe(clean());      
});

`

gulp-sass

前端可能使用sass 進行版面編輯,我們必須將其重新編譯為css得以佈署使用。通常我們會搭配上一篇minify直接產生min.css檔案。

透過下列指令安裝 gulp-sass:

npm install --save-dev gulp-sass

使用方法如下:

var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

`

powershell:

使用MSDeploy進行佈署與管理 IIS 的時候使用。其實本系列文章實作的內容都可以透過powershell實作完成,但需要進一步了解與使用大量的指令才得以完成。

使用方法如下:

gulp.task('excuteCommand', function() {
    var spawn = require("child_process").spawn,child;
        child = spawn("powershell.exe",['echo duran']);
        child.stdout.on("data",function(data){
            console.log("Powershell Data: " + data);
        });
        child.stderr.on("data",function(data){
            console.log("Powershell Errors: " + data);
        });
        child.on("exit",function(){
            console.log("Powershell Script finished");
        });
        child.stdin.end();
}); 

上一篇:Gulp 介紹與安裝
下一篇:TeamCity Agent 執行流程說明
返回目錄


參考資料

註:本系列文章將於2016 IT邦幫忙鐵人賽進行同時,一併發佈於個人blogger與dotblog。