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

摘要

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

主权项

一种前端开发工程化系统，其特征在于，包括：项目模板化生成模块，用于生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需依赖程序；构建发布模块，用于利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；其中所述构建发布模块包括开发单元和发布单元，所述开发单元用于在系统工作在开发模式下时，查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；所述发布单元用于在系统工作在发布模式下时，通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify‑js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务；开发环境建立模块，用于利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建。