CP 值很高的 Gulp
67 likes•13,141 views
本文介绍了 Gulp，一个基于 Node.js 的前端构建工具，涵盖了环境搭建、语法基础、任务管理和常用插件。讲解了如何通过 Gulp 进行 SCSS 编译、JS 文件处理以及如何使用 gulp-load-plugins 简化包管理。最后还提供了一些参考资料和社区资源以供学习和实践。
![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)
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