[指南] 前端自动化开发工具 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
  • [笔记] HTML 与 PUG 线上格式转换
  • [笔记] 使用 Gulp 进行网页前端自动化 – 用一般 HTML 来制作样板并排版
  • [笔记] 使用 Gulp 进行网页前端自动化 – 依照开发环境调整布署内容
  • [笔记] 使用 Gulp 进行网页前端自动化 – 架设简易服务器和压缩程式码
  • [笔记] 使用 Gulp 进行网页前端自动化 – Gulp 和 Bower 串接
  • [笔记] 使用 Gulp 进行网页前端自动化 – PostCSS 自动加上前缀 & Load Plugins
  • [笔记] 使用 Gulp 进行网页前端自动化 – 初始化你的第一个 Gulp 编译专案
  • [笔记] 使用 Gulp 进行网页前端自动化 – 简介
  • 按赞加入粉丝团

    延伸阅读