![GULP.TASK
? gulp.task(name, [, deps], doSomething)
13
? 範例：gulp.task(‘scripts’, function () { // 處理 js })
? 新增?一個名叫 scripts 的任務
? 範例：gulp.task(‘build’, [‘css’, ‘scripts’]);
? 新增?一個 build 任務，依序處理 css 跟 scripts 任務
在 terminal 輸?入 gulp [任務名稱] 就可以執?行任務
建任務](https://image.slidesharecdn.com/gulp-150129075007-conversion-gate02/85/CP-Gulp-13-320.jpg)
![GULP 套件介紹
npm install [套件名稱] --save-dev
17](https://image.slidesharecdn.com/gulp-150129075007-conversion-gate02/85/CP-Gulp-17-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (20)
![Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]](https://cdn.slidesharecdn.com/ss_thumbnails/senchaextjslearningpart2-mvcandmvvmarchitectureinextjsenglish-150615094157-lva1-app6891-thumbnail.jpg?width=560&fit=bounds)
Similar to CP 值很高的 Gulp (20)
![[OSDC12]相依性管理 - 以Ruby開發為例](https://cdn.slidesharecdn.com/ss_thumbnails/osdc12dependencymanagement-120416003059-phpapp01-thumbnail.jpg?width=560&fit=bounds)
CP 值很高的 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. ! ? 新增 gulp?le.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,autopre?xer, 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 之前
- 23. 23 2. 再到 gulp?le.js require 每個套件
- 24. 24 3. 開始使?用套件
- 26. GULP-LOAD-PLUGINS 26 偵測 package.json dependencies，並?自動幫忙載?入套件 1. 載?入並初始化 load-plguins 2. 改?用 load-plguins 寫法 範例：修改 scripts 任務的寫法
- 27. 27 好棒棒
- 29. 接下來？ 29
- 30. MORE REFERENCES ? gulp github - gulp recipes? - gulp repository 在 github 上分享的各種情況的實作? - 例如：統?一處理不同任務的錯誤訊息 30 ? 研究其他?大?大的 gulp?le.js? - google/web-starter-kit? - g0v/g0v.tw ? appleboy - Automating your work?ow with Gulp.js
- 31. 31 THANK YOU