一直对构建很困惑，究其原因，是源于构建相关的文章，总是伴随着一大堆的构建工具和配置文件。因此，总是未能很确切的理解构建的真正含义。
什么是构建
构建就是把我们在开发环境写的代码，转换成生产环境的代码。
构建过程
开发环境的代码
- 我们可能会用到
es6、sass、jsx等，从而需要预编译 - 我们可能忘记写
</div>，从而需要语法检查，各种lint，如HTMLlint Csslint eslit - 我们可能用了
react，他们有一些依赖，从而需要依赖管理 - 我们会更新代码，从而需要对文件进行版本管理
生产环境的代码
- 我们希望内容能正确的呈现，从而希望生产环境代码生成之前能有单元测试
- 希望资源少且小，从而能更快的完成页面的渲染
综上，构建过程应该包括
预编译、语法检查、词法检查、依赖处理、文件合并、文件压缩、单元测试、版本管理等。
构建工具
比较流行的构建工具用gulp和grunt，具体使用请参考gulp、 grunt。
比较流行打包工具webpack和parcel-bundler，具体使用请参考webpack、parcel-bundler。
思考
构建工具和打包工具有什么区别呢？
个人理解：构建工具，更注重的是前端的自动化流程，如gulp通过流式的文件管理和定制化的任务管理来实现对前端构建流程的管理。而打包工具更注重打包这一过程，主要包括依赖管理和版本管理。
如果你有不一样的解读，希望能够共同交流。
原文链接：https://www.jianshu.com/p/7a10e5e69275