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

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

• 1.
  GulpAutomate and enhanceyour workflow 中正大學WEIC 技術分享 / 多奇數位AnnaSu
• 2.
  我是Anna Su 一個喜歡做網站的前端工程師
• 3.
  大綱 u Gulp 介紹 u Gulp 執行流程 u Gulp任務怎麼寫 u DEMO
• 4.
  Gulp 介紹
• 5.
  目錄 u Gulp 介紹 u Gulp 是什麼? u 使用Gulp 的好處？ u 誰使用 Gulp? u Gulp 執行流程 u Gulp 任務怎麼寫 u DEMO
• 6.
  Gulp 是什麼? u  前端自動化任務(Task)管理工具 u 兩歲生日快到了 Initial Release：2013/7月
• 7.
  Gulp 是什麼? 前端自動化任務管理工具 u 運用別人寫好的套件，來加速前端開發流程 u 透過Gulp，能將你的任務整合在一起
• 8.
  Gulp 是什麼? u 為什麼要使用前端自動化任務管理工具？ 因為 前端有做不完的工作… 前端需要協助設計師，支援工程師
• 9.
  圖片來源 前端工程師的角色 前端需要和設計師與工程師溝通
• 10.
  前端工程師要學習 的課題有很多…
• 11.
  圖片來源
• 12.
  Anna Su 為了前(錢)途， 你必須不斷進化！ 圖片來源 But…
• 13.
  進 化
• 14.
  所以我們學習Gulp 協助開發前端任務
• 15.
  Gulp是前端自動化任務管理工具 圖片優化 壓縮檔案 合併檔案 同步檔案 發佈檔案 圖片來源：鋼鐵人3
• 16.
  我們應該知道Gulp是什麼了
• 17.
  目錄 u Gulp 介紹 u Gulp 是什麼? u 使用Gulp 的好處？ u 誰使用 Gulp? u Gulp 執行流程 u Gulp 任務怎麼寫 u DEMO
• 18.
  使用 Gulp 的好處? u 透過Gulp，能將你的任務整合在一起 u 只要使用一行指令，就可以幫助你自動執行任務
• 19.
  使用 Gulp 的好處? 前端任務包括編譯檔案，壓縮檔案，檢查檔案，測試 檔案，同步檔案，發佈檔案等等… 目前有21992 個Gulp插件， 可以幫助執行前端任務！ 2015/05/17 數據
• 20.
  2014/12 只有1369個plugin 2015/5 有21992個plugin
• 21.
  太棒了！！！ Gulp 這個工具 好像真的不錯！
• 22.
  目錄 u Gulp 介紹 u Gulp 是什麼? u 使用Gulp 的好處？ u 誰使用 Gulp? u Gulp 執行流程 u Gulp 任務怎麼寫 u DEMO
• 23.
  誰使用 Gulp?
• 24.
  去吧！就決定是你了 ü  使用Gulp，加速前端開發。 ü  透過Gulp，整合前端任務。 ü 執行Gulp，只要一行指令。
• 25.
  善用工具 就像是廚師 拿到一把厲害的菜刀！
• 27.
  目錄 u Gulp 介紹 u Gulp 執行流程 u 1.安裝 Gulp u 2. 編輯 Gulp u 3. 執行 Gulp u Gulp 任務怎麼寫 u DEMO
• 28.
  1. 安裝Gulp
• 29.
  Gulp安裝- 環境設定 +
• 30.
  Gulp安裝- 全域gulp npm install-g gulp Command line
• 31.
  Gulp安裝- 插件安裝 npm install--save-dev gulp Command line
• 32.
  2. 編輯任務
• 33.
  Gulp設定 u  載入任務 u  撰寫任務 編輯gulpfile.js檔案
• 34.
  Gulp設定 新增gulpfile檔案 gulpfile.js 根目錄
• 35.
  任務1: 壓縮CSS檔案 u  （1）載入插件– 使用require方法 // 定義gulp變數並載入gulp模組
• 36.
  任務1: 壓縮CSS檔案 u  （2）撰寫任務– gulp.task(name, fn)
• 37.
  講個小秘訣： u  新增任務的方法– gulp.task(name,fn) gulp.task(‘任務名稱’, function () { });
• 38.
  講個小秘訣： u  執行任務的來源 –gulp.src(glob)
• 39.
  講個小秘訣： u  串接任務的方法 –pipe
• 40.
  講個小秘訣： 檔案的存檔路徑 – gulp.dest(path)
• 41.
  壓縮CSS檔案的任務 設定完成！
• 42.
  任務2: 合併JS檔案 u  （1）載入插件– 使用require方法
• 43.
  任務2: 合併JS檔案 u  （2）撰寫任務– gulp.task(name, fn)
• 44.
  合併JS檔案的任務 設定完成！
• 45.
  任務3: 同步檔案 u  （1）載入插件– 使用require方法
• 46.
  任務3: 同步檔案 u  （2.1）撰寫任務– gulp.task(name, fn)
• 47.
  任務3: 同步檔案 u  （2.2）撰寫任務– gulp.watch(glob, fn) u 
• 48.
  同步檔案的任務 設定完成！
• 49.
  3. 執行 Gulp
• 50.
  Gulp執行方法 只要輸入 gulp 或者 gulp 任務名稱 Command line
• 51.
  DEMO
• 52.
  執行壓縮CSS檔案的任務 gulp minify-css
• 53.
  執行合併JS檔案的任務 gulp js
• 54.
  執行同步檔案的任務 gulp watch
• 55.
  1. 安裝 Gulp 2.編輯 Gulp 3. 執行 Gulp
• 56.
  Gulp 任務小撇步 Gulp 任務怎麼寫？
• 57.
  編輯Gulp 任務重點 u  了解有哪些好用插件 u 熟悉基本任務架構
• 58.
  Gulp API -熟悉基本任務架構 gulp.task(name, fn) gulp.watch(glob, fn) gulp.src(glob) gulp.dest(path) 定義任務名稱 運行指定的任務 檔案的來源(路徑) 檔案的存檔路徑
• 59.
  Gulp 插件 -了解有哪些好用插件 gulp-ruby-css gulp-minify-css gulp-rename gulp-notify gulp-jshint gulp-concat 編譯 sass 縮小化(minify)CSS代碼 重新命名 更新通知 檢測js代碼工具 合併程式碼
• 60.
  gulp-uglify gulp-imagemin del watch gulp-livereload gulp-connect 醜化(Uglify)壓縮代碼 圖片壓縮 重新命名 即時監聽 頁面自動更新 結合 webserver 跟livereload 的套件 Gulp 插件 - 了解有哪些好用插件
• 61.
  Gulp API- gulp.task(name,fn) 新增任務並指定順序: gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); }); 下列範例是先執行'clean'的任務，再執行 'styles', 'scripts', 'images'這三個任務
• 62.
  DEMO
• 63.
  前端技術與工具不斷更新 一開始有點痛苦…
• 64.
  希望大家都可以找到 自已的角色與任務
• 65.
  你會變得更強！！ 遇見你想要守護的夢想
• 66.
  我是Anna Su 一個喜歡做網站的前端工程師
• 67.
  分享結束，很高興認識大家 ，謝謝：）