[发明专利]一种前端开发工程化系统和方法

说明书

本发明实施例提供了一种前端开发工程化系统和方法，系统包括：项目模板化生成模块，用于生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需依赖程序；构建发布模块，用于利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；开发环境建立模块，利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用构建发布模块对目标页面进行开发构建。

技术领域

本发明属于涉及计算机软件技术领域，尤其涉及一种前端开发工程化系统和方法。

背景技术

随着社会的发展，各种智能设备已经成为人们生活和工作中不可或缺的电子设备。现有的智能设备能够安装各种应用程序(App)，以完成各种各样的功能。现有的各种应用程序大多需要经过前端开发工程化系统来进行开发，以方便技术人员。现有的典型的开发方式包括：

一种是淘宝网的def工具，这种开发工具的劣势在于淘宝网的def工具

过分依赖于淘宝自身体系，离开了起开发环境就无法使用，不具有普适性。同时def工具配置复杂、使用学习成本高、不易于扩展。

另一种是传统的前端开发采用grunt方式进行构建，这种开发工具具有以下缺陷:插件单一；配置复杂；流程控制糟糕；频繁的磁盘操作使得构建效率低下；读文件、修改文件、写文件的循环，导致插件与插件之前的工作无法有效串联起来。

还有一种是不使用工程化工具，这种方式具有以下缺点：这种开发方式原始且低效；无论是采用HTML语言、CSS语言、JS语言，开发过程中的线上的代码均得不到任何优化和处理，性能十分差；同时这种开发方式没有经过代码混淆和压缩，很容易暴露业务逻辑；无法使用模块方式进行复用模块的开发，重复会产生大量劳动；无法进行自动化发布及部署。

发明内容

针对现有技术中在对应用程序进行开发过程中缺少合式的开发工具的问题，本发明实施例的目的是提供一种有效且高效的前端开发工程化系统和方法。

为了解决上述问题，本发明实施例提出了一种前端开发工程化系统，包括：

项目模板化生成模块，用于生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需依赖程序；

构建发布模块，用于利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；

其中所述构建发布模块包括开发单元和发布单元，所述开发单元用于在系统工作在开发模式下时，查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；所述发布单元用于在系统工作在发布模式下时，通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务；