字串流(stream)
4
scss/*.scss
範例:編輯 scss ⾄至 css 檔案,並且 minify css
css/*.css
Read Files Write Files編譯 scss minify
程式碼
css minifycss
安裝 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- 專案相依的套件有哪些
9
介紹 Package.json
name*: 專案名稱
version*: 專案 version (1.0.0)
dependencies: 存放專案需要的模組套件 (-save) - ex: jQuery, AngularJS, Bootstrap
devDependencies: 存放開發需要的套件 ( --save-dev) - ex: gulp 套件, 測試⼯工具, etc
* 號為必填
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.WATCH
• 當有檔案變動時會跑對應的 task
範例:
!
!
1. 觀察 js 資料夾下⾯面全部的 js 檔案,⼀一旦發現檔案有變更,執⾏行 uglify 跟 reload 兩個任務。
2. 當有檔案變更,會發送 change event。可在跑檔案前做前置作業。
16
觀察檔案
• 截⽌止⾄至 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-LOAD-PLUGINS
26
偵測 package.json dependencies,並⾃自動幫忙載⼊入套件
1. 載⼊入並初始化 load-plguins
2. 改⽤用 load-plguins 寫法
範例:修改 scripts 任務的寫法
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
Top Related