本发明属于涉及计算机软件技术领域，尤其涉及一种前端开发工程化系统和方法。
背景技术：
随着社会的发展，各种智能设备已经成为人们生活和工作中不可或缺的电子设备。现有的智能设备能够安装各种应用程序(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资源到输出路径的复制输出任务；
开发环境建立模块，用于利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建。
其中，所述系统还包括：
依赖更新模块，用于对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
其中，所述系统还包括：
Base64编解码模块，用于利用Node.js将页面内的字体进行base64编码/解码。
进一步的，本发明实施例还提出了一种前端开发工程化方法，包括：
生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需的依赖程序；
利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；
利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建；
其中所述方法包括：
开发模式，在开发模式下所述方法包括：查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；
发布模式，在发布模式下所述方法包括：通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务。
其中，所述方法还包括：对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
其中，所述方法还包括：利用Node.js将页面内的字体进行base64编码/解码。
本发明的上述技术方案的有益效果如下：上述的技术方案提出了一种前端开发工程化系统和方法，提供了一整套解决方案，集成了webpack和gulp的打包、构建能力；由express提供了稳定高效的编译、开发环境；基于Nodejs语言的特性，使得该工具非常易于维护，便于扩展，高定制化。本发明实施例的技术方案覆盖了整个前端开发流程，从前端单元测试、代码检测、页面开发调试、支持less、es6语法编译、前端js模块管理，js、css代码压缩及优化、自动构建、打包、发布于一体，极大的提高了前端开发者的工作效率。现有技术中，前端开发工程往往拥有固定的脚手架及目录，每次创建新工程就意味着要手动去创建许多目录结构、相应文件、依赖，十分浪费开发资源。使用本发明实施例的前端开发工程化系统，可以自动创建及生成工程所需的一切内容，极大地提高了开发效率。同时，本发明实施例中在本地开发环境的集成，使得前端开发者不再需要在本地启用apache或者nginx服务，就可以实现服务器端浏览的效果，并且继承了一系列编译、检测工具，一劳永逸的解决了前端工程化的问题。凭借着webpack和gulp，打包发布的流程也得到极大地简化，用户只需要少量配置，就可以完成代码优化、编译、发布的工作。本发明实施例实现了各种工具、代码检测、单元测试功能的集成，也提升了前端的开发效率，减少了后期优化的成本，降低了线上问题风险。
附图说明
图1是本发明实施例的系统结构示意图。
具体实施方式
为使本发明要解决的技术问题、技术方案和优点更加清楚，下面将结合附图及具体实施例进行详细描述。
本发明实施例提出了一种如图1所示的前端开发工程化系统和方法。本发明实施例中应用到的现有技术包括：
1、Node.js：Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
2、Express:Express是一个简洁而灵活的node.js Web应用框架,提供一系列强大特性帮助你创建各种Web应用。Express不对node.js已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能。丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单。
3、Webpack：Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等。
4、Gulp:基于文件流的构建系统。
5、Grunt:Grunt是一个基于Nodejs的自动化任务执行工具
6、npm:NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准。
7、iconfont：国内功能很强大且图标内容很丰富的矢量图标库。
8、js:JavaScript的缩写。JavaScript是世界上最流行的编程语言之一，被广泛应用于HTML和Web领域，并被广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript是一种脚本语言、一种轻量级的编程语言、可插入HTML页面的编程代码。当js被插入到HTML页面后，可由所有的现代浏览器执行。
本发明实施例提出了一种如图1所示的前端开发工程化系统，包括：
为了解决上述问题，本发明实施例提出了一种前端开发工程化系统，包括：
项目模板化生成模块，用于生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需依赖程序；
构建发布模块，用于利用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及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建。
其中，所述系统还包括：
依赖更新模块，用于对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
其中，所述系统还包括：
Base64编解码模块，用于利用Node.js将页面内的字体进行base64编码/解码。
进一步的，本发明实施例还提出了一种前端开发工程化方法，包括：
生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需的依赖程序；
利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；
利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建；
其中所述方法包括：
开发模式，在开发模式下所述方法包括：查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；
发布模式，在发布模式下所述方法包括：通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务。
其中，所述方法还包括：对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
其中，所述方法还包括：利用Node.js将页面内的字体进行base64编码/解码。
本发明主要功能为以下几个模块：
1、项目模块化生成器(bid init)：
快速生成约定项目模板，当用户执行项目初始化命令时，会自动创建工程项目的目录及相关文件，并安装所需各种依赖，提升前端开发者的工作效率。
若要在一个新的目录下新建bid工程，可在该文件夹下使用bid init命令，会自动安装好所需要的依赖，同时生成出工程必须的目录结构。
2、开发环境服务器(bid dev)：
通过express.js建立web服务，通过多种express中间件，以及webpack提供的打包服务，完美的支持了less、sass、es6、react编译，以及css、js文件压缩、丑化、合并，并支持将代码内联在html中，减少多次http请求所消耗的时间及资源。通过webpack及其中间件模块，代码热刷新及实时编译构建(传统方式是watch文件后在进行构建或通过手动重启服务实现重新编译)。
在使用bid dev命令后，node服务端会自动在本地启动生成express server，同时遍历启动命令所在的目录结构下的工程目录，将全部页面以列表的形式展现在web端，用户点击某一具体页面，将通过构建模块(详见下文)进行开发构建。
3、构建及发布模块(bid build)：
使用gulp及webpack，通过相应中间件，提供模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成最轻量的压缩后的代码，保证线上文件得到最优化处理，并最大限度保护线上代码逻辑的安全性。
通过webpack相关插件以及npm包管理器中发布的多种lint模块，提供css、js代码规范及健康检测，及时发现代码的问题，并建立良好的前端开发规范，帮助前端开发者养成良好的编码习惯。
通过nodejs调用linux服务端发布脚本及发布配置文件，可将构建后的代码并行发布至多台服务器，提高发布效率。
在开发模式下，调用构建服务，会先查找将当前页面引用的全部js资源，将less编译解析生成css文件，然后将这些依赖打包、合并，并输出至开发服务器的内存中返回给前端。这种模式并不会生成任何文件，同时也不会对代码进行混淆，以方便开发者测试。
在发布模式下，调用构建服务，会通过gulp按顺序执行以下构建任务：init初始化(获取待构建页面及其依赖信息)、clean清理build目录、lint代码语法及规范检测、minify-js打包压缩js代码、内联html资源(将css和需要inline的js文件写入html文件)、复制图片资源、html、js资源至输出路径。
4、更新工程依赖模块(bid update)：
由于该发明的功能在不断添加，引用的依赖也会越来越多，为了及时能够使用到最新的功能，并确保需代码引用的依赖能够正常工作，需要为该发明提供依赖更新模块。
用户可以通过bid update命令对所需依赖进行更新。
5、其他工具模块(bid iconfont)：
通过nodejs，可以将ttf或者iconfont字体文件base64，节约线上字体加载请求，提高页面性能及效率。
以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明所述原理的前提下，还可以作出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。