重构构建的平凡之路

欢迎你们前往腾讯云社区，获取更多腾讯海量技术实践干货哦~

做者：李旦

导语

刚开始作前端的时候，一直觉得切好页面是重构的所有职责，在切好页面的前提，增长页面交互，这样已经能到重构的顶峰。直到进入公司后发现参与的项目都有两个特色，项目复杂和参与人数的多，发现传统的方法已经不适用。主要介绍本身重构构建经历，若有问题欢迎指教！ 乀(ˉεˉ乀)

以往存在的问题

这里介绍本身以往传统重构的方法容易暴露的缺点。

1. 编写风格不统一，致使代码可读性差，增长后期维护成本与沟通成本；
2. HTML和CSS代码冗余，增长了重构开发成本和页面打开速度；
3. 项目开发周期长，缺乏公共与私有框架的规划，一样会增长后期维护成本与开发成本，可复用性差；
4. 项目文件部署杂乱，致使项目后期维护困难；
5. 重构开发方法有优化提高空间；

重构构建的初步发展

在项目开始的时候，因为项目过大，支持重构的人愈来愈多了，这个时候你们讨论出的一些方法有：定义统一的代码规范、项目文件的合理部署、重构的方法优化、开发的自动化和重构架构的统一

实现方式：

1. 重构文件的统一部署，区分开发环境和正式环境；
2. 统一HTML和CSS代码的命名方式，增长代码的可读性，减小沟通成本；
3. 使用SASS抽离公共组件样式的模块，使得CSS的开发变得简单可维护，使页面可组合；
4. 使用Compass，自动生成雪碧图而且CSS同时生成背景坐标，提高重构效率；
5. 编写SASS公共方法，减小重复CSS代码，提高重构效率（包括compass自带方法函数）；
6. 结合gulp构建工具，对雪碧图自动合并，sass生成，文件部署快速部署，项目的分类进行统一管理；

重构构建的深度扩展

主要是以项目2.0版本为基础进行构建优化

第一个版本引出的问题：

1. 因项目庞大，前期考虑不足，缺乏颜色的配置方案，致使后期须要换肤功能没法支持，没法统一调整；
2. 文件未作合并压缩，增长了页面的请求；
3. 命名的统一虽然能解决代码的可读性，可是当代码过多时，查看起来仍然使人眼花缭乱，同开发之间的对接也变得困难；
4. 上传不方便，强行增长联调和测试的门槛；

主要围绕在不提高web架构的复杂度，结合构建工具使页面模块化和组件化，优化重构的工做流程，同时节省重构与前端或者开发之间的对接时间，搭建属于重构的管理系统加强重构对项目的管理能力

页面皮肤配置

在项目2.0初期时候，提早与设计进行页面换肤的颜色探讨，重构的时候根据少数颜色结合sass的颜色函数，达到页面总体的颜色配置。

后续有扩展空间，能够将配置放入管理端中，经过管理端传入颜色的配置再进行编译生成CSS文件。

LiveReload实现浏览器自动刷新

对页面进行样式更改以后，每每会屡次刷新页面查看效果，对页面进行联调的时候更能体现出自动刷新的重要性，每每一个细节会花不少时间

使用条件：

1. 谷歌安装LiveReload工具；
2. 用http-server配置静态服务器，打开网页
3. 执行配置好的gulp，而且打开谷歌LiveReload工具

优化：

由于LiveReload并非特别好使用，因此用 Browsersync 来替代LiveReload，Browsersync的功能更全更方便。这里好处我不一一列举，能够查看 Browsersync官方文档，有更详细的介绍。

其中也遇到了一些问题，由于是HTML和CSS都是编译生成，得须要去动态监听生成文件的改变，进行自动刷新。

静态页面的模块化、组件化

为何重构也要模块化、组件化：

1. 模块强调分离，对重构而言，咱们不能每次只写本身的HTML作好本身的事，重构是提供整张页面给前端或者后端，在庞大且复杂的项目中后续在开发页面时，每增长一个模块都须要和对接人员沟通清楚，可能还得指出具体位置；
2. 组件强调复用，在重构新的页面时，对公共组件部分还得进行再重构，增长了重构的开发时间；

实现方式：

• HTML：Gulp-content-includer

将静态HTML进行模块化开发，当开发人员拿到重构页面时候看到include模块， 清晰的知 道页面中引用了那些新模块，直接去进行快速开发，同时会生成完整的静态html便于查看效果。同时也避免了重构对公共组件的再重构，节省了重构制做静态页面的时间。利用gulp实现include双向绑定，更改include同时会更新完整静态html，而且浏览器会检测更改自动刷新

• CSS：SASS

CSS模块经过SASS进行组件化区分，避免引用多余的组件样式

搭建CSS和图片管理系统

由于管理系统是本身独自处理，因此还有不少待改进的地方，在可以完成基础功能的前提，后续继续慢慢跟进。

为何要搭建管理后台？

刚开始在项目初期的时候，咱们在每次联调或者重构完页面时，都须要经过前端或者开发进行协助将CSS及图片上传到对应环境中，最后由于实在太麻烦，重构也开始使用跳板机进行环境的上传。而后发现每次页面在后期联调维护的时候，由于上传环境复杂，须要花不少不必的时间在跳板机上传上，增长了工做量。

管理后台有哪些功能？

• 文件上传
  整个管理后台是以图片和CSS的上传与管理为基础围绕展开。

• 文件压缩
  包括CSS文件的压缩，图片的上传进行自动压缩，而且会将颜色配置的CSS和全局公共的CSS合并在同一个文件中，压缩后文件命名以 项目名+min.css 组成，线上保证有一份源CSS同时还会有一个压缩后CSS

为何不将CSS合并与压缩功能作在gulp中，却作到管理端上？

若是作到gulp中，会不方便后期的改版维护，在发布时，由于都是压缩过的CSS代码，不便和线上进行对比。虽然有SVN，可是为了保证一切以线上为主的基础，仍是会对线上的代码进行对比。

• 文件打印

用于打印CSS文件代码，更方便的进行对比操做

最后

以上只是列举了我我的在项目中重构构建历程，主要是为了减轻重复劳动，提升效率。咱们能够选择更加适合本身的方案，而不是在追寻技术的路上迷失了方向。

最后的最后

各位大佬求轻吐！！！

相关阅读

代码自动生成在重构中的一次探索

重构代码的Tricks

CSS 路径动画工具的诞生

此文已由做者受权腾讯云技术社区发布，转载请注明原文出处