[指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄

章節連結

最近因為工作上需要,重拾 Gulp 來作套件管理並自動化前端網頁撰寫的流程。想不到隨著 Babel 的版本提升,容易採坑的點也越來越多。這邊筆記下完整腳本和流程供以後參考。
javascript


流程

基本流程,瀏覽器端 Babel 編譯

HTML

  1. 讀取並作對應的調整修改
  2. 若有更動要重新刷新瀏覽器

SCSS

  1. 讀取並作 Sourcemap (僅開發階段)
  2. 加上 auto-prefix
  3. 壓縮 CSS (僅佈署階段)
  4. 重新命名資料夾根目錄 (若有需要)
  5. 輸出到目的地資料夾
  6. 若有更動要重新刷新瀏覽器

Plugins

  1. 讀取並作 Sourcemap (僅開發階段)
  2. 加上 auto-prefix
  3. 合併成一隻檔案
  4. 輸出到目的地資料夾

自身撰寫的 JavaScript

  1. 讀取並作 Sourcemap (僅開發階段)
  2. 壓縮 JS (僅佈署階段)
  3. 輸出到目的地資料夾
  4. 若有更動要重新刷新瀏覽器

監聽檔案和其他

  1. 監聽 js / css / html 檔案,若有更動就重啟
  2. 由於是在客戶端瀏覽器進行 babel 轉換,所以引用的 script 寫法要小心
  3. 例如:<script type=”text/babel” data-presets=”es2015,es2016,es2017“></script>

Babel 部份引入流程

HTML

  1. 讀取並作對應的調整修改
  2. 若有更動要重新刷新瀏覽器

SCSS

  1. 讀取並作 Sourcemap (僅開發階段)
  2. 加上 auto-prefix
  3. 壓縮 CSS (僅佈署階段)
  4. 重新命名資料夾根目錄 (若有需要)
  5. 輸出到目的地資料夾
  6. 若有更動要重新刷新瀏覽器

Plugins

  1. 讀取並作 Sourcemap (僅開發階段)
  2. 加上 auto-prefix
  3. 合併成一隻檔案
  4. 輸出到目的地資料夾

自身撰寫的 JavaScript

  1. 使用 Glob 抓取所有要編譯的檔案
  2. 每隻檔案建立各自的 browserify 獨立資料流
  3. 用 event-stream 合併所有資料流

每隻 browserify 獨立資料流

  1. 在 browserify 啟用 transform,並用 babelify 來設定 babel 參數來進行編譯
  2. 參數的方式和於根目錄放置 .babelrc 內的設置是一模一樣的
  3. 從 babel 7.4 版以後,取消 babel-polyfill
  4. 由於 gulp 和 node 的資料流格式不同,所以要先用 vinyl-source-stream 來轉換給 gulp 支援
  5. 由於 uglify 所預期的資料流格式為 buffer ,所以要再度轉換
  6. 製作 Sourcemap (僅開發階段)
    壓縮 JS (僅佈署階段)
  7. 重新命名資料夾根目錄 (若有需要)
  8. 輸出到目的地資料夾
  9. 若有更動要重新刷新瀏覽器

監聽檔案和其他

  1. 監聽 js / css / html 檔案,若有更動就重啟

關鍵套件列表

湊齊以下,你就可以使用 Babel 的相容瀏覽器功能。

1. @babel/runtime
2. @babel/core
3. @babel/plugin-transform-runtime
4. @babel/preset-env
5. @babel/runtime-corejs3
6. babelify
7. browserify
8. vinyl-buffer
9. vinyl-source-stream
10. event-stream

若你只是要全部引入的話,可以直接使用 babel-polyfill 和 babel-standalone。


步驟

Babel 完全引入

Babel 選擇性引入


Github

https://github.com/andy922200/gulp4_script_with_babel7


參考資料

  1. Roya’s Blog 現代化 Web 開發技術學習分享
  2. 结合Babel 7.4.0 谈一下Babel-runtime 和 Babel-polyfill
  3. [小菜一碟] 讓 IE(Internet Explorer)也能夠跑 ES6、ES7、ES8 的語法
  4. System limit for number of file watchers reached
  5. Browserify : Multiple bundles with gulp
  6. Gulp 4, Babel & Browserify
  7. 基于 Gulp + Browserify 构建 ES6 环境下的自动化前端项目
  8. how can I use babel polyfill to support all IE11 issues with gulp

相關文章

  • [指南] 前端自動化開發 Gulp + PHP + Browserify
  • [指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄
  • [筆記] HTML 與 PUG 線上格式轉換
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼
  • [筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接
  • [筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 簡介
  • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣:59