[第八屆IT邦幫忙鐵人賽] Gulp 安裝與介紹

前言

從前面幾篇的介紹,我們有了持續整合伺服器(TeamCity)的協助,加上 NET Core 本身的指令,目前為止可以完成多數的工作。但在自動化過程中,我們仍需要透過一些工具進行其他的工作,像是資料搬移、檔案命名或邏輯處理,當然,我們可以透過命令提示字元 command-line、powershell 或程式語言(C#, F#)...等方式進行這些工作。而這系列文章中,我們會使用 Gulp 與 powershell 來進行這些工作。若有說明錯誤或任何建議,請各位先進不吝提出,謝謝!


 

介紹

gulp 介紹

Gulp 是一個開源 Task runner,建構於 nodejs 與 npm 上,基於串流(Stream)方式自動化整合套件的方式從起點(Source)進行每一個工作(Task),最後到達目的地(Destination),如下圖所示。
http://ithelp.ithome.com.tw/upload/images/20161208/200914940HBZAV5mAu.jpg

Gulp 只有基本的四個 API 提供使用,如下:

名稱 描述
gulp.task 執行工作
gulp.src 執行資料來源
gulp.dest 執行結果位置
gulp.watch 監視執行過程中,資料是否變更

`

安裝gulp

Step 1.首先我們需要要先安裝 nodejs (載點),安裝過程就不再贅述。
http://ithelp.ithome.com.tw/upload/images/20161208/20091494ppQXnLo3XC.png

Step 2.安裝完成後,使用下列指令確認版本。

node --version
npm --version

http://ithelp.ithome.com.tw/upload/images/20161208/20091494A9eNwTjNiy.png

Step 3. 輸入下列指令安裝 gulp 與確認版本

npm install gulp -g
gulp -v

http://ithelp.ithome.com.tw/upload/images/20161208/200914947nAK76Ajem.png

http://ithelp.ithome.com.tw/upload/images/20161208/20091494WaF7oGtPuf.png

`

一個簡單的 gulp 範例 - css minify

Step 1. 開啟新增一個 demo1 的資料夾,開啟命令列(command line) 到此目錄,使用 npm init 指令來建立一個package.json檔案。(相關資訊隨意輸入)

npm init 

https://4.bp.blogspot.com/-HSlmMmnzGeQ/V4SCBQRX0qI/AAAAAAAAb-E/46bpkK1qKeodL45u9GgfR_fCbWNYfWOQQCLcB/s1600/100.png

Step 2.使用下列指令於本地端專案安裝gulp 與 gulp-minify-css。

npm install --save-dev gulp
npm install --save-dev gulp-minify-css

https://1.bp.blogspot.com/-_DVdLMltuIM/V4SCRiihRsI/AAAAAAAAb-M/-i_w0uDzgP8RkLXkdoHtHyp6QRnsm6XMgCLcB/s1600/101.png
https://4.bp.blogspot.com/-cF0RhOKQhKY/V4SYtgp4L-I/AAAAAAAAb_g/Z8IhfSDaI-ok0HoFn88Jt6JCcd8vdWJ2gCLcB/s1600/000008.png

Step 3.使用 visual studio core (或其他編輯工具)
https://2.bp.blogspot.com/-6M0tzZYl7tg/V4SRlrLkiDI/AAAAAAAAb_I/zT6TGcR8K60pPPBbo8DM_OALY0BfwiIRwCLcB/s1600/000006.png

Step 4.開啟我們剛剛建立專案的位置
https://1.bp.blogspot.com/-Q_N2OK8KKLY/V4SQwU-z7fI/AAAAAAAAb-8/YpddlBzJJNMUJPbD3YH4P1vWXAVMKQm-QCLcB/s1600/00003.png

Step 5.選擇新增檔案,我們加入 gulpfile.js
https://2.bp.blogspot.com/-jNjepfX2wGY/V4SQwTlGrqI/AAAAAAAAb-4/sJJa6YTBviM7htcBAsXLcCtfcyiZq5IvwCLcB/s1600/000004.png

Step 6. 加入下列程式碼

var gulp = require('gulp');
var cssminify = require('gulp-minify-css');
 
gulp.task('hello_world',function(){
        console.log('my first gulp task');
});
 
gulp.task('somename', function() {
    var stream = gulp.src('**/*.css')
        .pipe(cssminify())
        .pipe(gulp.dest('build'));
    return stream;
});

程式碼說明:

  1. 第1、2行加入 var gulp = require('gulp'); 與 var cssminify = require('gulp-minify-css');,表示引用這兩個套件。
  2. 我們有兩個 tasks,分別為 :
    hello : 列印出 "my first gulp task"
    somename : 執行css minify工作
  3. gulp.src 表示執行的來源,**/*.css 意思為此資料夾內所有副檔名為.css的檔案
  4. pipe(cssminify()) : 執行cssminify工作
  5. pipe(gulp.dest('build')) : 輸出位置為 build 資料夾內。
    https://1.bp.blogspot.com/-TyOxyJnDSxc/V4SePt6EHRI/AAAAAAAAcAA/61217PUOkU09sNBjDbf39ojBXZ9h3zNKQCLcB/s1600/0000011.png

Step 7.放入範例程式jquery.fancybox.css (您可以隨意放入css檔案)
http://ithelp.ithome.com.tw/upload/images/20161208/20091494buHF51nfVs.png

Step 8.輸入 gulp somename 執行,執行結果:
https://3.bp.blogspot.com/-pDzEeyAq48M/V4SbrOyKOsI/AAAAAAAAb_s/_bH7vQuI_P4mhSDye4nULiLkKdMetwPRwCLcB/s1600/000009.png

Step 9.開啟Demo1\build\css資料夾,觀看結果
https://1.bp.blogspot.com/-v7RcnS-TYXs/V4Sb8Ra0iFI/AAAAAAAAb_w/l1_wzMd8P44qydMYdzy3YkV0TUZMhc67wCLcB/s1600/0000010.png

http://ithelp.ithome.com.tw/upload/images/20161208/20091494tTlO1cLFVC.png


後記

  1. 目前個人看過2-3種持續整合的腳本與指令, Gulp 相對於其他 Sciprt 比起來簡潔且直覺很多,而能使用的gulp套件相當多,程式碼量也較少。下次若有機會可以建構CI流程,您不妨嘗試看看 Gulp。
  2. npm 部分可以考慮使用 yarn,過去在使用 npm -install 進行 前端 restore 過程中需要花費很多時間,雖然個人尚未測試,但聽說可以節省不少時間,有興趣的朋友可以研究研究。

上一篇:Net Core 多環境佈署設定
下一篇:Gulp 套件介紹
返回目錄
 


參考資料

gulp API docs

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