了解前端的构建工具
小序
最近在看到《深入浅出webpack》，我会将其中的一些知识点整理一下，欢迎阅读
构建工具，构建包括哪些
- 代码转换：将 TypeScript 编译成 JavaScript、将 scss 编译成 css 等。
- 文件优化：压缩 JavaScript、 css、 HT鸟也代码，压缩合并图片等。
- 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块 分类合并成一个文件。
- 自动刷新：监昕本地源代码的变化，自动重新构建、刷新浏览器。
- 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
- 自动发布：更新代码后，自动构建出线上发布代码井传输给发布系统
构建工具的举例及比较
- Npm Script 的优点是内置，无须安装其他依赖。其缺点是功能太简单
- Grunt自动化地执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件 Gruntfile.js 里，Grunt 的优点是：
– 灵活，它只负责执行我们定义的任务；
– 大量的可复用插件封装好了常见的构建任务。
– Grunt 的缺点是集成度不高，要写很多配置后才可以用，无法做到开箱即用。
– Grunt 相当于进化版的 Npm Script，它的诞生其实是为了弥补 Npm Script 的不足。 - Gulp ( http://gulpjs.com）是一个基于流的自动化构建工具。除了可以管理和执行任务， 还支持监听文件、读写文件
– 5种构建场景：
– 通过 gulp.task 注册一个任务；
– 通过 gulp.run 执行任务；
– 通过 gulp.watch 监听文件的变化；
– 通过 gulp.src 读取文件：
– 通过 gulp.dest 写文件。
– Gulp 的优点是好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用 。其 缺点和 Grunt 类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用 - Fis3 集成了 Web 开发中的常用构建功能
- Webpack是一个打包模块化 JavaScript 的工具，在 Webpack 里一 切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。
– Webpack好处专注于处理模块化的项目，能做到开箱即用、 一步到位：
– 可通过 Plugin 扩展，完整好用又不失灵活；
– 使用场景不局限于 Web 开发：
– 社区庞大活跃， 经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展：
– 良好的开发体验。
– Webpack的缺点是只能用于采用模块化开发的项目 - Rollup是一个和 Webpack 很类似但专注于 ES6 的模块打包工具，能针对 ES6 源码进行 Tree Shaking，以去除那些己被定义但没被使用的代码并进 行 Scope Hoisting，以减小输出文件的大小和提升运行性能
感谢
如果感觉对您的学习工作有帮助，请将它分享给需要的人，或者点赞鼓励一下，感谢支持
我还会不断更新。。。