介绍

相信只要是做前端开发的大佬或者刚入前端的小伙儿们都会写css代码，在这里为大家着重介绍一下企业级的css应用方案，既然是应用方案肯定离不开“工程化”相关的知识，下面简单介绍一下“工程化”。

工程化概述

• 什么是工程
• 工程化和构建工具的关系

什么是工程

当你看懂一个词的时候，有一个最好的方式就是拆词，“工程”只能拆解成两个字“工”和“程”。

• 工：一项一项的工作，要做的事情。
• 程：程就是程序，流程，做事情的先后顺序。

“工程”就是指一件事要做的步骤非常非常的多，并且每一个步骤都有先后顺序。 工程这个词最早不是出现在我们IT行业，最早出现在建筑行业，因为建筑行业，例如修楼，里面包含了一系列繁杂的工作，并且每一项工作都是有先后顺序的，所以才有了建筑工程这个概念。后来软件开发引入了“工程”这个概念，随着我们软件的规模越来越大，要做的事情也越来越多。后来大学里面有一个专业叫做“软件工程”。现在我们前端开发慢慢的出现了“前端工程化”这个概念，因为我们前端现在要做的事，并且能做的事越来越多了，从一开始构建整个项目到编写代码，如果使用一些工具例如（sass，less，ts，coffeeScript）等编写的，还会涉及到编译，打包，测试，罗列出来的事情一大堆，不像最早以前写一两个页面就完事儿了。

工程化和构建工具的关系

在向工程化靠近的道路上，出现了构建工具，很多人呢把工程化和构建工具划等号，这其实是不对的，因为前端工程化!=构建工具。严格意义上来讲，工程化其实是一套方法论，目的是解决大型项目和团队协作中代码维护和扩展问题的，目的是为了提高开发效率，代码质量和可维护性。而前端构建工具只是前端工程化里面的一环，不能划等号。

接下来为大家说一下关于前端构建工具

前面提到前端目前要做的事情越来越多，有一部工作实际上与业务逻辑无关的的工作

• 文件优化：压缩JavaScript,CSS,HTML,压缩合并图片等。
• 代码转换：将TypeScript/ES6编译成JavaScript，将SASS/LESS编译成CSS。
• 代码优化：为css代码添加兼容性等。

这些工作与业务逻辑无关但又不能不做，既然这些工作都要做，小明同学就问了那有谁来做这些工作呢？

我们会通过一些工具来完成这些工作，但是又产生一个新的问题，往往这些事情需要好几个工作来完成，这里就会存在一种情况，需要先将项目拖到a工具进行处理，在拖到b工具进行处理....等等，上面的这些步骤呢显得非常麻烦，我们希望有这么一个工具将上面所有的事情按照一定的顺序自动化的完成，这个工具就是我们前端的构建工具。

总的来说，“构建工具”里面“构建”二字是一个重点，这个工具究竟构建了一个啥？

简单说就是将我们开发环境下的项目代码构建为能够部署上线的代码。

通过构建工具，我们就可以通过一条指令就能够将开发环境的项目构建为生产环境的项目代码，然后要做的部署上线即可，我们就可以省去中间繁杂的步骤。

目前前端领域有非常多的构建工具，个人感觉整体来讲可以分为三代

• 第一代构建工具：以grunt，glup为代表的构建工具
• 第二代构建工具：以webpack为代表的构建工具
• 第三代构建工具：以wite为代表的构建工具

这篇文章就分享到这里，感谢大家的支持。