Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
More from Anna Su
More from Anna Su (20)
Recently uploaded
Recently uploaded (9)
入門Gulp - 前端自動化開發工具
- 1. GulpAutomate and enhance your workflow 中正大學WEIC 技術分享 / 多奇數位AnnaSu
- 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
- 10. 前端工程師要學習 的課題有很多…
- 11. 圖片來源
- 13. 進 化
- 16. 我們應該知道Gulp是什麼了
- 17. 目錄 u Gulp 介紹 u Gulp 是什麼? u 使用 Gulp 的好處？ u 誰使用 Gulp? u Gulp 執行流程 u Gulp 任務怎麼寫 u DEMO
- 19. 使用 Gulp 的好處? 前端任務包括編譯檔案，壓縮檔案，檢查檔案，測試 檔案，同步檔案，發佈檔案等等… 目前有 21992 個Gulp插件， 可以幫助執行前端任務！ 2015/05/17 數據
- 22. 目錄 u Gulp 介紹 u Gulp 是什麼? u 使用 Gulp 的好處？ u 誰使用 Gulp? u Gulp 執行流程 u Gulp 任務怎麼寫 u DEMO
- 23. 誰使用 Gulp?
- 24. 去吧！就決定是你了 ü 使用Gulp，加速前端開發。 ü 透過Gulp，整合前端任務。 ü 執行Gulp，只要一行指令。
- 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檔案
- 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
- 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
- 51. DEMO
- 55. 1. 安裝 Gulp 2. 編輯 Gulp 3. 執行 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