Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CP 值很高的 Gulp

介紹 gulp 給初學者前端學習

  • Login to see the comments

CP 值很高的 Gulp

  1. 1. CP 值超⾼高的 GULP YVONNE YU 1
  2. 2. • 介紹 Gulp • 建置 Gulp 環境 • Gulp 語法 • Gulp 套件 2
  3. 3. GULP 介紹 • 基於 node.js • 前端建構⼯工具 • 使⽤用 字串流 ⽅方式建制 3
  4. 4. 字串流(stream) 4 scss/*.scss 範例:編輯 scss ⾄至 css 檔案,並且 minify css css/*.css Read Files Write Files編譯 scss minify 程式碼 css minify
 css
  5. 5. 建置環境 5
  6. 6. 安裝 NODE.JS (NPM) http://nodejs.org (mac 安裝說明) 6
  7. 7. 開始 GULP 專案 • 新增專案資料夾 • e.g. gulp-test 7 • npm install gulp - - save-dev • 新增 package.json 來管理套件
 - npm init 新增 default package.json
 - 專案相依的套件有哪些
  8. 8. 8
  9. 9. 9 介紹 Package.json name*: 專案名稱 version*: 專案 version (1.0.0) dependencies: 存放專案需要的模組套件 (-save)
 - ex: jQuery, AngularJS, Bootstrap devDependencies: 存放開發需要的套件 ( --save-dev)
 - ex: gulp 套件, 測試⼯工具, etc * 號為必填
  10. 10. 10
  11. 11. ! • 新增 gulpfile.js (檔名⼀一定要對) • require(‘gulp’); 在檔案裡 ! ! 11
  12. 12. GULP 語法教學 12
  13. 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. 14. GULP.SRC • 回傳指定路徑的檔案 • 參考 node-glob syntax ! ! 14 使⽤用在 templates 資料夾 下⾯面全部的 jade 檔案 指定輸⼊入檔案
  15. 15. GULP.DEST • 發佈編輯好的檔案在指定路徑資料夾 • 如果資料夾沒有存在,會幫忙新增 ! ! 15 編譯後的 html 存 minify 後的檔案 輸出檔案位置
  16. 16. GULP.WATCH • 當有檔案變動時會跑對應的 task 範例: ! ! 1. 觀察 js 資料夾下⾯面全部的 js 檔案,⼀一旦發現檔案有變更, 執⾏行 uglify 跟 reload 兩個任務。 2. 當有檔案變更,會發送 change event。可在跑檔案前做前 置作業。 16 觀察檔案
  17. 17. GULP 套件介紹 npm install [套件名稱] --save-dev 17
  18. 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. 19. SCSS & MINIFY 19 1. 下載套件 2. 新增任務(Task) 3. 指定 input 位置 4. 編譯 sass 5. minify 編譯後的 css 6. 把 minify css 放置在 css 資料夾內 範例:編輯 scss ⾄至 css 檔案,並且 minify css
  20. 20. CONCAT & UGLIFY 20 1. uglify 每份 js 2. 把壓縮後的 js 合併 3. 合併 js 輸出到 dist/all.min.js 把 js 檔案醜化(混淆)並合併,⼤大幅減少檔案⼤大⼩小
  21. 21. GULP-CHANGED 21 只處理有修改的檔案,不浪費時間處理沒有修改檔案 // jshint 語法檢測 把 changed 套件放在指定
 路徑之後,跑 jshint 之前
  22. 22. 22 假如我們需要上述的範例的全部套件 1. 需要先在 package.json 宣告
  23. 23. 23 2. 再到 gulpfile.js require 每個套件
  24. 24. 24 3. 開始使⽤用套件
  25. 25. 25 每新增⼀一個套件,都 要在兩個地⽅方宣告不會 很⿇麻煩嗎? 可以npm install
 後就直接使⽤用嗎?
  26. 26. GULP-LOAD-PLUGINS 26 偵測 package.json dependencies,並⾃自動幫忙載⼊入套件 1. 載⼊入並初始化 load-plguins 2. 改⽤用 load-plguins 寫法 範例:修改 scripts 任務的寫法
  27. 27. 27 好棒棒
  28. 28. –中國諺語 「三個臭⽪皮匠,勝過⼀一個諸葛亮」 28 多試試各種套件組合
 組出符合你需求的任務
  29. 29. 接下來? 29
  30. 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. 31 THANK YOU

×