CN104991860A - Web前端自动化开发方法与系统 - Google Patents

Abstract

本发明涉及软件开发技术，公开了一种WEB前端自动化开发方法。通过获取编写的编码文件，在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件，提高了WEB前端开发效率，在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息，减少了服务器资源的占用，最后发送压缩后的所述编码文件和版本信息至代码仓库，以供发布，优化了WEB前端页面性能，提高了用户的体验度。本发明还公开一种WEB前端自动化开发系统。本发明解决了现有技术中存在的WEB前端开发效率低，占用服务器资源多，用户体验不好的缺陷。

Description

WEB前端自动化开发方法与系统

【技术领域】

本发明涉及软件开发技术，尤其涉及WEB前端自动化开发方法与系统。

【背景技术】

在传统的WEB前端页面加载的资源文件多，向服务器发送的请求数多，占用大量的服务器资源，页面加载慢，用户体验不好。比如页面有模块a、b、c，其对应使用了a.css、b.css、c.css以及a.js、b.js、c.js，引用多个CSS和JS文件意味着页面加载的时候会发送更多的资源请求到服务器，这样会增加服务器的连接数和占用更多的服务器带宽，从而导致WEB前端页面加载慢，影响用户的使用。目前采用的解决方案是资源文件合并压缩，但手动合并压缩过程繁琐，容易出错。

【发明内容】

本发明要解决的技术问题是提供一种WEB前端自动化开发方法与系统，解决现有技术中存在的WEB前端开发效率低，占用服务器资源多，用户体验不好的缺陷。

为解决上述技术问题，本发明提供以下技术方案。

一方面，本发明提供一种WEB前端自动化开发方法。

所述WEB前端自动化开发方法包括如下步骤：

获取编写的编码文件；

在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件；

在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息；

发送压缩后的所述编码文件和版本信息至代码仓库，以供发布。

在一些实施例中，在获取编写的编码文件的步骤之前，所述WEB前端自动化开发方法还包括如下步骤：

基于Node.js和Grunt构建WEB项目的目录，并初始化所述WEB项目。

在一些实施例中，在获取编写的编码文件的步骤之前，所述WEB前端自动化开发方法还包括如下步骤：

预先生成配置文件，所述配置文件包括预设的测试规则和/或合并文件信息。

在一些实施例中，所述在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件的步骤包括：

在监测到所述编码文件发生变化时，根据预设的测试规则对所述编码文件进行语法测试。

在一些实施例中，所述在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息的步骤包括：

在测试通过时，读取并合并需要合并的编码文件；

将合并后的所述编码文件写入预设的合并文件中；

采用混淆压缩的方式对所述合并文件中的内容进行压缩；

根据压缩后的所述编码文件构建版本信息。

另一方面，本发明提供一种WEB前端自动化开发系统。

所述WEB前端自动化开发系统包括：

获取模块，用于获取编写的编码文件；

自动测试模块，用于在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件；

压缩模块，用于在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息；

发送模块，用于发送压缩后的所述编码文件和版本信息至代码仓库，以供发布。

在一些实施例中，所述WEB前端自动化开发系统还包括：

项目构建模块，用于基于Node.js和Grunt构建WEB项目的目录，并初始化所述WEB项目。

在一些实施例中，所述WEB前端自动化开发系统还包括：

预设模块，用于预先生成配置文件，所述配置文件包括预设的测试规则和/或合并文件信息。

在一些实施例中，所述自动测试模块具体用于在监测到所述编码文件发生变化时，根据预设的测试规则对所述编码文件进行语法测试。

在一些实施例中，所述压缩模块包括：

合并子模块，用于在测试通过时，读取并合并需要合并的编码文件；

写入子模块，用于将合并后的所述编码文件写入预设的合并文件中；

压缩子模块，采用混淆压缩的方式对所述合并文件中的内容进行压缩；

版本构建子模块，用于根据压缩后的所述编码文件构建版本信息。

本发明的有益效果在于通过获取编写的编码文件，在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件，提高了WEB前端开发效率，在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息，减少了服务器资源的占用，最后发送压缩后的所述编码文件和版本信息至代码仓库，以供发布，优化了WEB前端页面性能，提高了用户的体验度。本发明解决了现有技术中存在的WEB前端开发效率低，占用服务器资源多，用户体验不好的缺陷。

【附图说明】

图1为本发明WEB前端自动化开发方法的第一实施例流程示意图；

图2为本发明WEB前端自动化开发方法的第二实施例流程示意图；

图3为本发明实施例中步骤S30的细化流程示意图；

图4为本发明WEB前端自动化开发系统的第一实施例功能模块示意图；

图5为本发明WEB前端自动化开发系统的第二实施例功能模块示意图；

图6为本发明压缩模块的功能子模块示意图。

【具体实施方式】

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

实施例1

实施例1为本发明提供的WEB前端自动化开发方法的第一实施例。参照图1，图1为本发明WEB前端自动化开发方法的第一实施例流程示意图。

所述WEB前端自动化开发方法包括如下步骤：

S10：获取编写的编码文件；

具体地，本发明实施例用于WEB前端开发，为实现WEB前端页面的某些功能，程序员常常需要编写多个CSS、JS等编码文件，本步骤用于获取程序员编写的编码文件，获取的方式可以是预先将编码文件存储于预设的路径中，程序直接从预设的路径读取所述编码文件，也可以以浏览的方式查找到存放所述编码文件的路径后再读取所述编码文件。

S20：在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件；

具体地，该步骤的实现方式为，监测在预设的时间周期内编码文件的内容是否与上个周期相同，若相同，则说明编码文件没有被修改，不需要执行任何操作，若不同，则说明程序员对该编码文件进行了修改或升级，此时，需要测试编码文件是否符合编码要求，对修改后的编码文件进行自动测试；也可调用Grunt的插件Grunt-contrib-watch对编码文件进行监测，当监测到编码文件中的内容发生变化时，说明编码人员修改了编码文件，此时需对修改后的编码文件进行自动测试。在一个实施例中，在监测到所述编码文件发生变化时，可以根据预设的测试规则对所述编码文件进行语法测试。例如可以调用Grunt的插件Grunt-contrib-jshint对JS编码文件的语法进行测试。也可以按照编码规则自行定义测试规则，测试的内容不局限于语法。还可以是编码关键字匹配检查等。

S30：在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息；

具体地，执行该步骤时，首先判断编码文件测试是否通过，若没有通过，则提示编程人员修改，直到测试通过后，才对测试通过的编码文件进行压缩，在提高编码效率的同时，大大减少服务器资源的占用。在压缩编码文件时，可以调用Grunt的插件Grunt-contrib-concat对需要压缩的编码文件进行合并，再调用Grunt的插件Grunt-contrib-uglify对合并后的编码文件进行混淆压缩。混淆压缩是指通过去掉注释、空格、换行以及将变量名、方法名重新定义为更短的名称来实现文件压缩，最后对压缩后的编码文件创建版本信息。

S40：发送压缩后的所述编码文件和版本信息至代码仓库，以供发布。

具体地，将压缩后的编码文件和创建的版本信息发送至代码仓库以供发布，所述代码仓库存储于服务器中，这样只有当编码文件的内容发送变化、通过测试且压缩后才会发送至服务器的代码仓库中，大大减少了服务器资源的占用，同时提高了WEB前端页面的性能。

本发明实施例通过获取编写的编码文件，在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件，提高了WEB前端开发效率，在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息，减少了服务器资源的占用，最后发送压缩后的所述编码文件和版本信息至代码仓库，以供发布，优化了WEB前端页面性能，提高了用户的体验度。本发明解决了现有技术中存在的WEB前端开发效率低，占用服务器资源多，用户体验不好的缺陷。

实施例2

实施例2为本发明提供的WEB前端自动化开发方法的第二实施例。参照图2，图2为本发明WEB前端自动化开发方法的第二实施例流程示意图。

基于实施例1，在本实施例中，在获取编写的编码文件的步骤之前，即在步骤S10之前，所述WEB前端自动化开发方法还包括如下步骤：

S50：基于Node.js和Grunt构建WEB项目的目录，并初始化所述WEB项目。

S60：预先生成配置文件，所述配置文件包括预设的测试规则和/或合并文件信息。

Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js采用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行的数据密集型的实时应用。Grunt是一个基于任务的JavaScript工程命令行构建工具。Grunt调用init task初始化一个新项目，一旦完成初始化，将会在生成一个带有完整目录结构的Grunt.js配置文件。将预设的测试规则和/或用于存放合并文件的文件名称和路径信息存储于Grunt.js配置文件中。在运行实施例1的方法步骤之前，优选基于Node.js和Grunt构建WEB项目的目录，并初始化WEB项目，并与后续自动开发环境的搭建。

实施例3

实施例3为本发明提供的WEB前端自动化开发方法的第三实施例。参照图3，图3为本发明实施例中步骤S30的细化流程示意图。

基于实施例1或实施例2，在本实施例中，其他步骤参考实施例1或实施例2，所述步骤S30具体包括：

S301：在测试通过时，读取并合并需要合并的编码文件；

具体地，在测试通过时，可以选择需要合并的编码文件，例如，可以只选择更改后的编码文件，并读取所述编码文件的内容。可以调用Grunt的插件Grunt-contrib-concat对需要压缩的编码文件进行合并。

S302：将合并后的所述编码文件写入预设的合并文件中；

具体地，将合并后的编码文件写入配置文件预设的合并文件的文件名称和路径对应的合并文件中，若该合并文件已经存在，则覆盖该合并文件中之前的内容，若该合并文件不存在，则按照文件名称和路径重新生成该合并文件，并将合并后的编码文件写入该合并文件中。

S303：采用混淆压缩的方式对所述合并文件中的内容进行压缩；

具体地，可调用Grunt的插件Grunt-contrib-uglify对合并后的编码文件，通过去掉注释、空格、换行以及将变量名、方法名重新定义为更短的名称来实现文件混淆压缩。

S304：根据压缩后的所述编码文件构建版本信息。

本发明实施例基于实施例1或实施例2，通过对步骤S30的细化，在编码过程中自动实现了对编码文件的合并压缩，提高了编码效率。

另一方面，本发明提供一种WEB前端自动化开发系统。

实施例4

实施例4为本发明提供的WEB前端自动化开发系统的第一实施例。参照图4，图4为本发明WEB前端自动化开发系统的第一实施例功能模块示意图。

所述WEB前端自动化开发系统包括：

获取模块10，用于获取编写的编码文件；

具体地，本发明实施例用于WEB前端开发，为实现WEB前端页面的某些功能，程序员常常需要编写多个CSS、JS等编码文件，获取模块10用于获取程序员编写的编码文件，获取的方式可以是预先将编码文件存储于预设的路径中，程序直接从预设的路径读取所述编码文件，也可以以浏览的方式查找到存放所述编码文件的路径后再读取所述编码文件。

自动测试模块20，用于在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件；

具体地，自动测试模块20的实现方式为，监测在预设的时间周期内编码文件的内容是否与上个周期相同，若相同，则说明编码文件没有被修改，不需要执行任何操作，若不同，则说明程序员对该编码文件进行了修改或升级，此时，需要测试编码文件是否符合编码要求，对修改后的编码文件进行自动测试；也可调用Grunt的插件Grunt-contrib-watch对编码文件进行监测，当监测到编码文件中的内容发生变化时，说明编码人员修改了编码文件，此时需对修改后的编码文件进行自动测试。在一个实施例中，所述自动测试模块20具体用于在监测到所述编码文件发生变化时，可以根据预设的测试规则对所述编码文件进行语法测试。例如可以调用Grunt的插件Grunt-contrib-jshint对JS编码文件的语法进行测试。也可以按照编码规则自行定义测试规则，测试的内容不局限于语法。还可以是编码关键字匹配检查等。

压缩模块30，用于在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息；

具体地，压缩模块30首先判断编码文件测试是否通过，若没有通过，则提示编程人员修改，直到测试通过后，才对测试通过的编码文件进行压缩，在提高编码效率的同时，大大减少服务器资源的占用。在压缩编码文件时，可以调用Grunt的插件Grunt-contrib-concat对需要压缩的编码文件进行合并，再调用Grunt的插件Grunt-contrib-uglify对合并后的编码文件进行混淆压缩。混淆压缩是指通过去掉注释、空格、换行以及将变量名、方法名重新定义为更短的名称来实现文件压缩，最后对压缩后的编码文件创建版本信息。

发送模块40，用于发送压缩后的所述编码文件和版本信息至代码仓库，以供发布。

具体地，发送模块40将压缩后的编码文件和创建的版本信息发送至代码仓库以供发布，所述代码仓库存储于服务器中，这样只有当编码文件的内容发送变化、通过测试且压缩后才会发送至服务器的代码仓库中，大大减少了服务器资源的占用，同时提高了WEB前端页面的性能。

本发明实施例通过获取编写的编码文件，在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件，提高了WEB前端开发效率，在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息，减少了服务器资源的占用，最后发送压缩后的所述编码文件和版本信息至代码仓库，以供发布，优化了WEB前端页面性能，提高了用户的体验度。本发明解决了现有技术中存在的WEB前端开发效率低，占用服务器资源多，用户体验不好的缺陷。

实施例5

实施例5为本发明提供的WEB前端自动化开发系统的第二实施例。参照图5，图5为本发明WEB前端自动化开发系统的第二实施例功能模块示意图。

基于实施例4，在本实施例中，所述WEB前端自动化开发系统还包括：

项目构建模块50，用于基于Node.js和Grunt构建WEB项目的目录，并初始化所述WEB项目。

预设模块60，用于预先生成配置文件，所述配置文件包括预设的测试规则和/或合并文件信息。

具体地，Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js采用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行的数据密集型的实时应用。Grunt是一个基于任务的JavaScript工程命令行构建工具。项目构建模块基于Grunt调用init task初始化一个新项目，一旦完成初始化，将会在生成一个带有完整目录结构的Grunt.js配置文件。预设模块60用于预先生成配置文件，将预设的测试规则和/或用于存放合并文件的文件名称和路径信息存储于Grunt.js配置文件中。在运行实施例1的方法步骤之前，优选基于Node.js和Grunt构建WEB项目的目录，并初始化WEB项目，并与后续自动开发环境的搭建。

实施例6

实施例6为本发明提供的WEB前端自动化开发系统的第三实施例。参照图6，图6为本发明压缩模块的功能子模块示意图。

基于实施例4或实施例5，在本实施例中，所述压缩模块30包括：

合并子模块301，用于在测试通过时，读取并合并需要合并的编码文件；

具体地，在测试通过时，可以选择需要合并的编码文件，例如，可以只选择更改后的编码文件，并读取所述编码文件的内容。可以调用Grunt的插件Grunt-contrib-concat对需要压缩的编码文件进行合并。

写入子模块302，用于将合并后的所述编码文件写入预设的合并文件中；

具体地，将合并后的编码文件写入配置文件预设的合并文件的文件名称和路径对应的合并文件中，若该合并文件已经存在，则覆盖该合并文件中之前的内容，若该合并文件不存在，则按照文件名称和路径重新生成该合并文件，并将合并后的编码文件写入该合并文件中。

压缩子模块303，采用混淆压缩的方式对所述合并文件中的内容进行压缩；

具体地，可调用Grunt的插件Grunt-contrib-uglify对合并后的编码文件，通过去掉注释、空格、换行以及将变量名、方法名重新定义为更短的名称来实现文件混淆压缩。

版本构建子模块304，用于根据压缩后的所述编码文件构建版本信息。

本发明实施例基于实施例4或实施例5，压缩模块的各个子模块之间协同工作，在编码过程中自动实现了对编码文件的合并压缩，提高了编码效率。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种WEB前端自动化开发方法，其特征在于，所述WEB前端自动化开发方法包括如下步骤：

获取编写的编码文件；

在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件；

在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息；

发送压缩后的所述编码文件和版本信息至代码仓库，以供发布。

2.如权利要求1所述的WEB前端自动化开发方法，其特征在于，在获取编写的编码文件的步骤之前，所述WEB前端自动化开发方法还包括如下步骤：

基于Node.js和Grunt构建WEB项目的目录，并初始化所述WEB项目。

3.如权利要求1所述的WEB前端自动化开发方法，其特征在于，在获取编写的编码文件的步骤之前，所述WEB前端自动化开发方法还包括如下步骤：

预先生成配置文件，所述配置文件包括预设的测试规则和/或合并文件信息。

4.如权利要求3所述的WEB前端自动化开发方法，其特征在于，所述在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件的步骤包括：

在监测到所述编码文件发生变化时，根据预设的测试规则对所述编码文件进行语法测试。

5.如权利要求3或4所述的WEB前端自动化开发方法，其特征在于，所述在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息的步骤包括：

在测试通过时，读取并合并需要合并的编码文件；

将合并后的所述编码文件写入预设的合并文件中；

采用混淆压缩的方式对所述合并文件中的内容进行压缩；

根据压缩后的所述编码文件构建版本信息。

6.一种WEB前端自动化开发系统，其特征在于，所述WEB前端自动化开发系统包括：

获取模块，用于获取编写的编码文件；

自动测试模块，用于在监测到所述编码文件中的内容发生变化时，自动测试所述编码文件；

压缩模块，用于在所述编码文件测试通过时，压缩测试通过的所述编码文件，并构建版本信息；

发送模块，用于发送压缩后的所述编码文件和版本信息至代码仓库，以供发布。

7.如权利要求6所述的WEB前端自动化开发系统，其特征在于，所述WEB前端自动化开发系统还包括：

项目构建模块，用于基于Node.js和Grunt构建WEB项目的目录，并初始化所述WEB项目。

8.如权利要求6所述的WEB前端自动化开发系统，其特征在于，所述WEB前端自动化开发系统还包括：

预设模块，用于预先生成配置文件，所述配置文件包括预设的测试规则和/或合并文件信息。

9.如权利要求8所述的WEB前端自动化开发系统，其特征在于，所述自动测试模块具体用于在监测到所述编码文件发生变化时，根据预设的测试规则对所述编码文件进行语法测试。

10.如权利要求8或9所述的WEB前端自动化开发系统，其特征在于，所述压缩模块包括：

合并子模块，用于在测试通过时，读取并合并需要合并的编码文件；

写入子模块，用于将合并后的所述编码文件写入预设的合并文件中；

压缩子模块，采用混淆压缩的方式对所述合并文件中的内容进行压缩；

版本构建子模块，用于根据压缩后的所述编码文件构建版本信息。