Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie CP 值很高的 Gulp
Ähnlich wie CP 值很高的 Gulp (20)
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. ! • 新增 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 之前
- 23. 23 2. 再到 gulpfile.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 • 研究其他⼤大⼤大的 gulpfile.js - google/web-starter-kit - g0v/g0v.tw • appleboy - Automating your workflow with Gulp.js
- 31. 31 THANK YOU