CP 值超⾼高的 GULPYVONNE YU

1

• 介紹 Gulp

• 建置 Gulp 環境

• Gulp 語法

• Gulp 套件

2

GULP 介紹

• 基於 node.js

• 前端建構⼯工具

• 使⽤用 字串流 ⽅方式建制

3

字串流(stream)

4

scss/*.scss

範例：編輯 scss ⾄至 css 檔案，並且 minify css

css/*.css

Read Files Write Files編譯 scss minify

程式碼

css minifycss

建置環境

5

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

6

開始 GULP 專案

• 新增專案資料夾

• e.g. gulp-test

7

• npm install gulp - - save-dev

• 新增 package.json 來管理套件- npm init 新增 default package.json- 專案相依的套件有哪些

8

9

介紹 Package.json

name＊: 專案名稱

version＊: 專案 version (1.0.0)

dependencies: 存放專案需要的模組套件 （-save） - ex: jQuery, AngularJS, Bootstrap

devDependencies: 存放開發需要的套件 ( --save-dev) - ex: gulp 套件, 測試⼯工具, etc

* 號為必填

10

!

• 新增 gulpfile.js （檔名⼀一定要對）

• require(‘gulp’); 在檔案裡

!

!

11

GULP 語法教學

12

GULP.TASK

• gulp.task(name, [, deps], doSomething)

13

• 範例：gulp.task(‘scripts’, function () { // 處理 js })

• 新增⼀一個名叫 scripts 的任務

• 範例：gulp.task(‘build’, [‘css’, ‘scripts’]);

• 新增⼀一個 build 任務，依序處理 css 跟 scripts 任務

在 terminal 輸⼊入 gulp [任務名稱] 就可以執⾏行任務

建任務

GULP.SRC

• 回傳指定路徑的檔案

• 參考 node-glob syntax

!

!

14

使⽤用在 templates 資料夾 下⾯面全部的 jade 檔案

指定輸⼊入檔案

GULP.DEST

• 發佈編輯好的檔案在指定路徑資料夾

• 如果資料夾沒有存在，會幫忙新增

!

!

15

編譯後的 html

存 minify 後的檔案

輸出檔案位置

GULP.WATCH

• 當有檔案變動時會跑對應的 task

範例：

!

!

1. 觀察 js 資料夾下⾯面全部的 js 檔案，⼀一旦發現檔案有變更，執⾏行 uglify 跟 reload 兩個任務。

2. 當有檔案變更，會發送 change event。可在跑檔案前做前置作業。

16

觀察檔案

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

17

• 截⽌止⾄至 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

SCSS & MINIFY

19

1. 下載套件

2. 新增任務(Task)

3. 指定 input 位置

4. 編譯 sass

5. minify 編譯後的 css

6. 把 minify css 放置在 css 資料夾內

範例：編輯 scss ⾄至 css 檔案，並且 minify css

CONCAT & UGLIFY

20

1. uglify 每份 js2. 把壓縮後的 js 合併

3. 合併 js 輸出到 dist/all.min.js

把 js 檔案醜化（混淆）並合併，⼤大幅減少檔案⼤大⼩小

GULP-CHANGED

21

只處理有修改的檔案，不浪費時間處理沒有修改檔案

// jshint 語法檢測

把 changed 套件放在指定路徑之後，跑 jshint 之前

22

假如我們需要上述的範例的全部套件

1. 需要先在 package.json 宣告

23

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

24

3. 開始使⽤用套件

25

每新增⼀一個套件，都要在兩個地⽅方宣告不會

很⿇麻煩嗎？

可以npm install 後就直接使⽤用嗎？

GULP-LOAD-PLUGINS

26

偵測 package.json dependencies，並⾃自動幫忙載⼊入套件

1. 載⼊入並初始化 load-plguins

2. 改⽤用 load-plguins 寫法

範例：修改 scripts 任務的寫法

27

好棒棒

–中國諺語

「三個臭⽪皮匠，勝過⼀一個諸葛亮」

28

多試試各種套件組合組出符合你需求的任務

接下來？

29

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

THANK YOU