Download to read offline
How to use gulp
- 1. Automate and enhanceyour workflow 1 撰寫人: Vanessa.Huang
- 2. 2 . gulp專案前置作業 3. gulp專案資料夾位置 4 . 第一次專案如何執行 5 . gulp自動化任務流程 6 . gulp任務 — 任務delete — 任務replace — 任務transpiler — 任務babel — 任務uglify — 任務moveFile — 任務sass — 任務spriter — 任務cssnano — 任務revCollectorHtml — 任務watch — 任務default 7 . 結論 1 . 專案說明 — 任務revCollectorCss — 任務rev— 任務eslint 2 Outline — 任務delMap
- 3. 為了達到在程式開發上更加便利與節省效能的目的， 我們可以運用gulp的自動 化特性，導入多項擴充套件，並在程式修改後，不需重啟即能自動運行，達到真正 的自動化模式。 這次添加的擴充套件的功能有： js檔案除錯 —>檢查偵測不通過的檔案，並顯示檔名與行數 es6模組化 —> 模組化開發打包 es6轉es5 —> 方便使用es6新語法與功能 js檔案壓縮 —> 檔案變小 sass、scss轉css —> 方便使用sass開發，並可透過sass語法打包 雪碧圖 —> 多張圖合併為一張，減少瀏覽器的請求次數 css檔案壓縮 —> 檔案變小 hash版本控制 —> 增加版本號，解決cache問題 js css 版本控制 3 專案說明
- 4. gulp-src gulp-dest gulp自動化完成的檔案需要被gulp自動化的檔案 (開發資料夾） (目的地資料夾） 4 這次的專案，已建立兩個資料夾—>gulp-src、gulp-dest： Gulp專案前置作業
- 5.
- 6.
- 7. package.json : 7 第二步： 安裝package.json中的套件 （若有權限問題須改成sudonpm install) 第一次專案如何執行(2/4)
- 8. 8 gulp(給jenkins操作) gulp watch(給local端操作） 當檔案 新增、 修改、 刪除時 重新觸發 第三步： 依照需求輸入 或 第一次專案如何執行(3/4)
- 9. 9 第四步： gulp完成後，commint檔案說明 需忽略不要commint的資料夾：node_moudles、gulp-dest gulp-dest （resources底下） 只需commit gulp-src資料夾內、或有修改的其餘檔案如gulpfile.js... node_moudles gulp-dest （WEB-INF底下） 第一次專案如何執行(4/4)
- 10.
- 11. 任務 watch(1/2) —— 目的：監控，檔案新增、刪除、修改時觸發—— 11 watch
- 12. 任務 watch(2/2) —— 目的：監控，檔案新增、刪除、修改時觸發—— gulp task :watch 12 針對gulp-src資料夾內檔案 新增、修改、刪除時觸發
- 13. 任務 default —— 目的：Terminal輸入gulp時，預設的第一個任務—— 13 default
- 14. —— 目的：刪除gulp-dest資料夾 —— 任務delete(1/2) 14 delete
- 15. delete前： delete後： delResources delResources gulptask : delete —— 目的：刪除gulp-dest資料夾 —— 任務 delete(2/2) delViews delViews 15
- 16.
- 17. —— 目的：移動資料夾 —— 任務moveFile(2/2) gulptask : moveFile moveFile前： moveResources moveResourcesmoveViews moveViews moveFile後： 17
- 18.
- 19. gulp task :replace 任務replace(2/2) replace前： replace後： —— 目的：替換jsp、css、sass、scss內路徑到gulp完後正確位置 —— 19 (替換js內路徑放於task transpiler中) css資料夾內包含：css、sass、scss檔案
- 20. —— 目的：js檔案除錯 —— 任務eslint(1/3) 20 eslint
- 21. —— 目的：js檔案除錯 —— 任務eslint(2/3) pacjage.json裡做除錯設定 21 1 2 1 . 規則表內打勾部分為預設：http://eslint.cn/docs/rules/ 2 . rules :設定規則 (依照第1點規則表客製化) 有console時，不報錯 客製化規則（可取消預設中部分規則，也可再增加預設外規則） 使用空白和Tab混合縮排，不報錯 未宣告的變數，不報錯 已宣告但未使用的變數，不報錯 預設常見規則 開發環境, browser設定為true 支持es6語法 支持模組化 開發環境 解析器設定
- 22. —— 目的：js檔案除錯 —— 任務eslint(3/3) 出錯時 觸發的除錯套件 可對照規則表查詢此套件 22 gulp task : eslint 有問題的檔案名稱 出現幾個問題
- 23. —— 目的：es6模組化 —— 任務transpiler(1/4) 23 transpiler
- 24. —— 目的：es6模組化 —— gulptask : transpiler 幾乎主流瀏覽器都不支援es6模組化，此時就必續透過transpiler進行編譯 任務 transpiler(2/4) 1 .替換js內路徑的replace做在這一個任務裡 (sourcemap並無支援replace功能，需模組化後馬上replace，把它變成一包，再讓sourcemap使用） 24 1
- 25. 模組化打包 這三隻檔案要打包 export這三隻檔案 —— 目的：es6模組化 —— 任務transpiler(3/4) gulp_main.js: import需要被打包的檔案 25
- 26. —— 目的：es6模組化 —— sourcesmap：支持處理過的檔案 任務transpiler(4/4) 26 gulp_test.js 為需要加密的檔案 控制不產生sourcemap 詳細說明在task delMap
- 27. 任務 babel(1/2) —— 目的：es6轉es5—— 27 babel
- 28. gulp task :babel babel前：babel後： 任務 babel(2/2) —— 目的：es6轉es5 —— 28
- 29. —— 目的：js壓縮 —— 任務uglify(1/2) 29 uglify
- 30. gulp task :uglify uglify前：uglify後： —— 目的：js壓縮 —— 任務 uglify(2/2) 30
- 31.
- 32. 任務 delMap(2/3) 32 —— 目的：控制檔案不產生sourcemap—— package.json (在delMapList中設定不要產生sourcemap的檔案名稱) delMap後： ( 預先在delMapList中設定的檔案不會產生map檔) gulp_ test.js： 無map產生檔
- 33. 任務 delMap(3/3) 33 —— 目的：控制檔案不產生sourcemap—— gulp task :delMap 1 2 1 . 刪除map檔案 2 .刪除js中與map檔對應的url :
- 34. —— 目的：sass、scss轉css 、打包css—— 任務 sass(1/3) 34 sass
- 35. sass前： sass後： gulp_main.sass： import需要被打包的檔案 這四隻檔案要被打包 —— 目的：sass、scss轉css、打包css —— 任務 sass(2/3) 針對entry資料夾內 原先為sass、scss的檔案 多出副檔名為css的檔案 35 gulp task :sass
- 36. sass寫法可以import多個檔案打包，藉由gulp任務再轉為css —— 目的：sass、scss轉css 、打包css—— 任務 sass(3/3) 36
- 37. 任務 spriter(1/6) —— 目的：雪碧圖，將多張圖合為一張—— 37 spriter
- 38. 任務 spriter(2/6) —— 目的：雪碧圖，將多張圖合為一張—— 雪碧過後的圖，減少瀏覽器的請求次數： mac ritina使用@2x圖 38
- 39. 任務 spriter(3/6) —— 目的：雪碧圖，將多張圖合為一張—— gulp task :spriter 1 2 1 .scale：在css中產生圖片的backgroung-size，若使用2x圖，會比原本圖大2倍，所以須縮放0.5倍，還原一般尺寸 2 .padding：產生圖片之間的間距，避免在瀏覽器中定位誤抓到鄰近圖檔 39
- 40. 任務 spriter(4/6) —— 目的：雪碧圖，將多張圖合為一張—— spriter前： （創建一隻sass檔案，並經由上一步task sass功能已轉為css） spriter後： 1 .gulpfile.js中scale設為0.5，故圖片大小要調整成原尺寸一半 ，為一般尺寸 3 .放入圖片url 5 .gulpfile.js中scale設為0.5，故產生background-size 4 .background-image的url改成雪碧後的合成圖，用background-position進行定位 1 2 3 4 5 2 .不需要被雪碧的圖片，需加上註解，則不會有任何變化 40
- 41. 任務 spriter(5/6) —— 目的：雪碧圖，將多張圖合為一張—— 一支jsp內有兩隻css也可正常抓圖片定位顯示在瀏覽器上 gulp_test.jsp gulp_spriter_2.sassgulp_spriter.sass 41
- 42. 任務 spriter(6/6) —— 目的：雪碧圖，將多張圖合為一張—— 瀏覽器上的呈現： gulp_spriter.sass gulp_spriter_2.sass 42
- 43. 任務 cssnano(1/2) —— 目的：css壓縮—— 43 cssnano
- 44. cssnano前： cssnano後： 任務 cssnano(2/2) ——目的：css壓縮 —— gulp task :cssnano 44
- 45. 任務 rev(1/3) —— 目的：版本控制，檔案增加版本號—— 45 rev
- 46. gulp task :rev 任務rev(2/3) —— 目的：版本控制，檔案增加版本號 —— 產生映射表： 映射表檔案： 46
- 47. rev前： rev後： 任務 rev(3/3) ——目的：版本控制，檔案增加版本號 —— 47
- 48. —— 目的：版本控制，將產生的版本號替換jsp內原有路徑 —— 48 任務revCollectorHtml(1/3) revCollectorHtml
- 49. gulp task :revCollectorHtml ——目的：版本控制，將產生的版本號替換jsp內原有路徑 —— 49 任務 revCollectorHtml(2/3)
- 50. revCollectorHtml前： —— 目的：版本控制，將產生的版本號替換jsp內原有路徑 —— revCollectorHtml後： 50 任務revCollectorHtml(3/3)
- 51. —— 目的：版本控制，將產生的版本號替換css內原有路徑 —— 51 任務revCollectorCss(1/2) revCollectorCss
- 52. —— 目的：版本控制，將產生的版本號替換CSS內原有路徑 —— gulptask :revCollectorCss revCollectorCss前： revCollectorCss後： 52 任務 revCollectorCss(2/2)
- 53.
- 54. 結論 2 . 能自由撰寫es6、sass、scss等語言 4. 節省效能、優化網頁加載速度 — 利用雪碧圖減少瀏覽器的請求次數 — 檔案壓縮 3 . 方便版本控制管理，解決cache問題 54 1 . 使用eslint進行程式碼除錯檢查
- 55.