入門Gulp - 前端自動化開發工具

Gulp Automate and enhance your workflow�

中正大學WEIC 技術分享 / 多奇數位AnnaSu�

我是Anna Su

一個喜歡做網站的前端工程師�

大綱�

u Gulp 介紹�

u Gulp 執行流程�

u Gulp 任務怎麼寫�

u DEMO�

Gulp 介紹�

目錄� u Gulp 介紹�

u Gulp 是什麼?� u 使用 Gulp 的好處？� u 誰使用 Gulp?�

u Gulp 執行流程� u Gulp 任務怎麼寫� u DEMO�

Gulp 是什麼?�

u  前端自動化任務(Task)管理工具

u 兩歲生日快到了

Initial Release：2013/7月�

Gulp 是什麼?�

前端自動化任務管理工具

u 運用別人寫好的套件，來加速前端開發流程 u 透過Gulp，能將你的任務整合在一起� �

Gulp 是什麼?�

u 為什麼要使用前端自動化任務管理工具？

因為� 前端有做不完的工作…�

前端需要協助設計師，支援工程師�

圖片來源

前端工程師的角色

前端需要和設計師與工程師溝通�

前端工程師要學習的課題有很多…�

圖片來源�

讓自己成為更好的前端工程師

Anna Su� 為了前(錢)途，你必須不斷進化！

圖片來源�

But…

進 化

所以我們學習Gulp協助開發前端任務�

Gulp是前端自動化任務管理工具� �

圖片優化� 壓縮檔案�

合併檔案� 同步檔案� 發佈檔案�

圖片來源：鋼鐵人3�

我們應該知道Gulp是什麼了�

目錄� u Gulp 介紹�

u Gulp 是什麼?�

u 使用 Gulp 的好處？� u 誰使用 Gulp?�

u Gulp 執行流程� u Gulp 任務怎麼寫� u DEMO�

使用 Gulp 的好處?� u 透過Gulp，能將你的任務整合在一起� u 只要使用一行指令，就可以幫助你自動執行任務�

使用 Gulp 的好處?� 前端任務包括編譯檔案，壓縮檔案，檢查檔案，測試檔案，同步檔案，發佈檔案等等…� � �

目前有 21992 個Gulp插件，�

可以幫助執行前端任務！�

2015/05/17 數據�

2014/12 只有1369個plugin�

2015/5 有21992個plugin�

太棒了！！！� Gulp 這個工具 好像真的不錯！�

目錄� u Gulp 介紹�

u Gulp 是什麼?� u 使用 Gulp 的好處？�

u 誰使用 Gulp?� u Gulp 執行流程� u Gulp 任務怎麼寫� u DEMO�

誰使用 Gulp?�

去吧！就決定是你了

圖片來源：神奇寶貝�

ü  使用Gulp，加速前端開發。

ü  透過Gulp，整合前端任務。

ü  執行Gulp，只要一行指令。�

善用工具 就像是廚師 拿到一把厲害的菜刀！�

目錄� u Gulp 介紹� u Gulp 執行流程�

u 1. 安裝 Gulp� u 2. 編輯 Gulp � u 3. 執行 Gulp�

u Gulp 任務怎麼寫� u DEMO�

1. 安裝Gulp�

Gulp安裝- 環境設定�

+�

Gulp安裝- 全域gulp�

npm install -g gulp� Command line

Gulp安裝- 插件安裝�

npm install --save-dev gulp�

Command line

2. 編輯任務�

Gulp設定�

u  載入任務�

u  撰寫任務� �

編輯 gulpfile.js檔案

Gulp設定�

新增gulpfile檔案�

gulpfile.js�

根目錄

任務1: 壓縮CSS檔案�

u  （1）載入插件 – 使用require方法�

// 定義gulp變數並載入gulp模組�

任務1: 壓縮CSS檔案�

u  （2）撰寫任務 – gulp.task(name, fn) �

講個小秘訣：�

u  新增任務的方法– gulp.task(name, fn) �

gulp.task(‘任務名稱’, function () { });�

講個小秘訣：�

u  執行任務的來源 – gulp.src(glob) �

講個小秘訣：�

u  串接任務的方法 – pipe �

講個小秘訣：� 檔案的存檔路徑 – gulp.dest(path) �

壓縮CSS檔案的任務 設定完成！�

任務2: 合併JS檔案�

u  （1）載入插件 – 使用require方法�

任務2: 合併JS檔案�

u  （2）撰寫任務 – gulp.task(name, fn) �

合併JS檔案的任務 設定完成！�

任務3: 同步檔案�

u  （1）載入插件 – 使用require方法�

任務3: 同步檔案�

u  （2.1）撰寫任務 – gulp.task(name, fn) �

任務3: 同步檔案�

u  （2.2）撰寫任務 – gulp.watch(glob, fn) �

u  �

同步檔案的任務 設定完成！�

3. 執行 Gulp�

Gulp執行方法�

只要輸入�

gulp� 或者�

gulp 任務名稱�

Command line

DEMO

執行壓縮CSS檔案的任務 gulp minify-css�

執行合併JS檔案的任務 gulp js�

執行同步檔案的任務 gulp watch�

1. 安裝 Gulp 2. 編輯 Gulp 3. 執行 Gulp �

Gulp 任務小撇步� Gulp 任務怎麼寫？�

編輯Gulp 任務重點�

u  了解有哪些好用插件�

u  熟悉基本任務架構� �

Gulp API - 熟悉基本任務架構 �

gulp.task(name, fn) � gulp.watch(glob, fn) � gulp.src(glob) � gulp.dest(path) �

定義任務名稱� 運行指定的任務� 檔案的來源(路徑)� 檔案的存檔路徑�

Gulp 插件 - 了解有哪些好用插件 �

gulp-ruby-css� gulp-minify-css� gulp-rename� gulp-notify� gulp-jshint� gulp-concat�

編譯 sass� 縮小化(minify)CSS代碼� 重新命名� 更新通知� 檢測js代碼工具� 合併程式碼�

gulp-uglify� gulp-imagemin� del� watch� gulp-livereload� gulp-connect�

醜化(Uglify)壓縮代碼� 圖片壓縮� 重新命名� 即時監聽� 頁面自動更新� 結合 webserver 跟 livereload 的套件�

Gulp 插件 - 了解有哪些好用插件 �

Gulp API- gulp.task(name, fn)�

新增任務並指定順序:�

gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); });�

下列範例是先執行'clean'的任務，再執行'styles', 'scripts', 'images'這三個任務�

DEMO

前端技術與工具不斷更新 一開始有點痛苦…�

希望大家都可以找到自已的角色與任務�

你會變得更強！！

但 遇見你想要守護的夢想�

我是Anna Su

一個喜歡做網站的前端工程師�

分享結束，很高興認識大家 ，謝謝：）�