Gulp Automate and enhance your workflow�
中正大學WEIC 技術分享 / 多奇數位AnnaSu�
我是Anna Su
一個喜歡做網站的前端工程師�
大綱�
u Gulp 介紹�
u Gulp 執行流程�
u Gulp 任務怎麼寫�
u DEMO�
目錄� 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�
目錄� 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,只要一行指令。�
善用工具 就像是廚師 拿到一把厲害的菜刀!�
目錄� u Gulp 介紹� u Gulp 執行流程�
u 1. 安裝 Gulp� u 2. 編輯 Gulp � u 3. 執行 Gulp�
u Gulp 任務怎麼寫� u DEMO�
Gulp安裝- 全域gulp�
npm install -g gulp� Command line
Gulp安裝- 插件安裝�
npm install --save-dev gulp�
Command line
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) �
任務3: 同步檔案�
u (1)載入插件 – 使用require方法�
任務3: 同步檔案�
u (2.1)撰寫任務 – gulp.task(name, fn) �
任務3: 同步檔案�
u (2.2)撰寫任務 – gulp.watch(glob, fn) �
u �
Gulp執行方法�
只要輸入�
gulp� 或者�
gulp 任務名稱�
Command line
執行壓縮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'這三個任務�
前端技術與工具不斷更新 一開始有點痛苦…�
希望大家都可以找到自已的角色與任務�
你會變得更強!!
但 遇見你想要守護的夢想�
我是Anna Su
一個喜歡做網站的前端工程師�
分享結束,很高興認識大家 ,謝謝:)�