介紹 gulp 給初學者前端學習

1. CP 值超⾼高的 GULP
YVONNE YU
1

2. • 介紹 Gulp
• 建置 Gulp 環境
• Gulp 語法
• Gulp 套件
2

3. GULP 介紹
• 基於 node.js
• 前端建構⼯工具
• 使⽤用 字串流 ⽅方式建制
3

4. 字串流(stream)
4
scss/*.scss
範例：編輯 scss ⾄至 css 檔案，並且 minify css
css/*.css
Read Files Write Files編譯 scss minify
程式碼
css
minify
css

5. 建置環境
5

6. 安裝 NODE.JS （NPM）
http://nodejs.org (mac 安裝說明)
6

7. 開始 GULP 專案
• 新增專案資料夾
• e.g. gulp-test
7
• npm install gulp - - save-dev
• 新增 package.json 來管理套件
- npm init 新增 default package.json
- 專案相依的套件有哪些

8. 8

9. 9
介紹 Package.json
name＊: 專案名稱
version＊: 專案 version (1.0.0)
dependencies: 存放專案需要的模組套件 （-save）
- ex: jQuery, AngularJS, Bootstrap
devDependencies: 存放開發需要的套件 ( --save-dev)
- ex: gulp 套件, 測試⼯工具, etc
* 號為必填

10. 10

11. !
• 新增 gulpfile.js （檔名⼀一定要對）
• require(‘gulp’); 在檔案裡
!
!
11

12. GULP 語法教學
12

13. GULP.TASK
• gulp.task(name, [, deps], doSomething)
13
• 範例：gulp.task(‘scripts’, function () { // 處理 js })
• 新增⼀一個名叫 scripts 的任務
• 範例：gulp.task(‘build’, [‘css’, ‘scripts’]);
• 新增⼀一個 build 任務，依序處理 css 跟 scripts 任務
在 terminal 輸⼊入 gulp [任務名稱] 就可以執⾏行任務
建任務

14. GULP.SRC
• 回傳指定路徑的檔案
• 參考 node-glob syntax
!
!
14
使⽤用在 templates 資料夾
下⾯面全部的 jade 檔案
指定輸⼊入檔案

15. GULP.DEST
• 發佈編輯好的檔案在指定路徑資料夾
• 如果資料夾沒有存在，會幫忙新增
!
!
15
編譯後的 html
存 minify 後的檔案
輸出檔案位置

16. GULP.WATCH
• 當有檔案變動時會跑對應的 task
範例：
!
!
1. 觀察 js 資料夾下⾯面全部的 js 檔案，⼀一旦發現檔案有變更，
執⾏行 uglify 跟 reload 兩個任務。
2. 當有檔案變更，會發送 change event。可在跑檔案前做前
置作業。
16
觀察檔案

17. GULP 套件介紹
npm install [套件名稱] --save-dev
17

18. • 截⽌止⾄至 2015/01/26, 總共有 1,207 套件
• for CSS:
gulp-ruby-scss, gulp-less, gulp-sourcemaps, css-sprite,
minify-css,autoprefixer, etc
• for JavaScript:
gulp-concat, gulp-uglify, jshint, gulp-coffee, etc
• for build:
gulp-util, gulp-plumber, gulp-browser-sync, gulp-load-
plugins, gulp-changed, gulp-rename, gulp-livereload,
gulp-clean, etc
18

19. SCSS & MINIFY
19
1. 下載套件
2. 新增任務(Task)
3. 指定 input 位置
4. 編譯 sass
5. minify 編譯後的 css
6. 把 minify css 放置在 css 資料夾內
範例：編輯 scss ⾄至 css 檔案，並且 minify css

20. CONCAT & UGLIFY
20
1. uglify 每份 js
2. 把壓縮後的 js 合併
3. 合併 js 輸出到 dist/all.min.js
把 js 檔案醜化（混淆）並合併，⼤大幅減少檔案⼤大⼩小

21. GULP-CHANGED
21
只處理有修改的檔案，不浪費時間處理沒有修改檔案
// jshint 語法檢測
把 changed 套件放在指定
路徑之後，跑 jshint 之前

22. 22
假如我們需要上述的範例的全部套件
1. 需要先在 package.json 宣告

23. 23
2. 再到 gulpfile.js require 每個套件

24. 24
3. 開始使⽤用套件

25. 25
每新增⼀一個套件，都
要在兩個地⽅方宣告不會
很⿇麻煩嗎？
可以npm install
後就直接使⽤用嗎？

26. GULP-LOAD-PLUGINS
26
偵測 package.json dependencies，並⾃自動幫忙載⼊入套件
1. 載⼊入並初始化 load-plguins
2. 改⽤用 load-plguins 寫法
範例：修改 scripts 任務的寫法

27. 27
好棒棒

28. –中國諺語
「三個臭⽪皮匠，勝過⼀一個諸葛亮」
28
多試試各種套件組合
組出符合你需求的任務

29. 接下來？
29

30. MORE REFERENCES
• gulp github - gulp recipes
- gulp repository 在 github 上分享的各種情況的實作
- 例如：統⼀一處理不同任務的錯誤訊息
30
• 研究其他⼤大⼤大的 gulpfile.js
- google/web-starter-kit
- g0v/g0v.tw
• appleboy - Automating your workflow with Gulp.js

31. 31
THANK YOU