自动同步刷新浏览器的方法、装置及计算机设备与流程

本发明涉及前端开发技术领域，尤其涉及一种自动同步刷新浏览器的方法、装置及计算机设备。

背景技术

在web端进行系统程序开发过程中，如果代码变更时，需要重新启动系统读取配置文件，随着系统复杂度的增加，重启时间也会不断的增加。具体地，在以前传统的网站开发中，前端一般扮演的只是切图的工作，只是简单地将ui设计师提供的原型图实现成静态的html页面，而具体的页面交互逻辑，比如与后台的数据交互工作等，可能都是由后台的开发人员来实现的，或者是前端是紧紧的耦合后台。而且更有可能后台人员直接兼顾前端的工作，一边实现api接口，一边开发页面，两者互相切换着做，而且根据不同的url动态拼接页面，这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢，而且代码难以维护。代码变更时，需要重新启动系统读取配置文件，随着系统复杂度的增加重启时间不断的增加。很多配置文件是和当前开发项无关的，也必须加载。由于其系统架构原因无法独立前端进行单独开发，导致需要加载很多不必要的东西

另一方面，开发人员在进行前端开发时，经常需要使用到多个设备，多个设备会具有多个屏幕，比如工程师经常会遇到需要双屏开发的情况，在一个屏幕上写代码，然后在扩展屏幕上放着浏览器观察代码效果。这样的缺点就是，需要开发人员实时刷新浏览器，看看代码运行是否正常。可是把鼠标从两个屏幕滑来滑去，很麻烦，而且每个网页在不同设备的浏览器里，测试时间呈指数级增长，无论是pc还是移动端。

技术实现要素：

本发明的目的是提供一种自动同步刷新浏览器的方法、装置及计算机设备，用于解决现有技术存在的问题。

为实现上述目的，本发明提供一种自动同步刷新浏览器的方法，包括以下步骤：启动代码变更监听服务，其中，所述代码变更监听服务用于在开发过程中监听代码文件的更新；判断所述代码变更监听服务是否检测到代码文件的更新；当所述代码变更监听服务检测到代码文件的更新时，确定出现更新的代码文件；获取出现更新的代码文件；调用预先设置的浏览器刷新模块，所述浏览器刷新模块用于对浏览器进行自动刷新；通过所述浏览器刷新模块利用获取到的所述出现更新的代码文件自动刷新与所述出现更新的代码文件对应的原始代码文件，以对所述浏览器进行自动同步刷新。

可选地，在启动代码变更监听服务之前，还包括：在前端系统全局安装gulp工具，以生成代码开发所需的运行环境；在所述运行环境下对每个开发项目单独配置gulp工具，以对每个开发项目单独配置运行环境；获取每个开发项目对应的配置文件，其中，所述配置文件包含有所有对应项目的文件名称；对所述配置文件中需要进行监听的文件名称进行标记。

可选地，启动代码变更监听服务包括：启动所述代码变更监听服务的监听功能；利用所述代码变更监听服务读取所述配置文件，从所述配置文件中确定存在标记的代码文件，作为所要监听的代码文件；利用所述代码变更监听服务对存在标记的代码文件进行监听。

可选地，代码变更监听服务包括以下至少之一：gulp工具、所述浏览器刷新模块、sass工具、pug工具、gulp-autoprefixer模块；其中，所述浏览器刷新模块为browser-sync模块。

可选地，启动代码变更监听服务包括：启动所述gulp工具；依次加载所述浏览器刷新模块、所述sass工具、所述pug工具、所述gulp-autoprefixer模块。

可选地，通过所述浏览器刷新模块利用获取到的所述出现更新的代码文件自动刷新与所述出现更新的代码文件对应的原始代码文件包括：执行文件重新读取的任务，其中，所述任务用于读取所述出现更新的代码文件；利用读取到的所述出现更新的代码文件更新服务器后端的静态资源，使用所述browser-sync模块刷新系统重新获取更新后的静态资源。

可选地，所述代码文件的更新包括以下至少之一：新增或变更功能项、修改界面、修改处理逻辑。

为实现上述目的，本发明还提供一种自动同步刷新浏览器的装置，其包括：启动单元，用于启动代码变更监听服务，其中，所述代码变更监听服务用于在开发过程中监听代码文件的更新；判断单元，用于判断所述代码变更监听服务是否检测到代码文件的更新；确定单元，用于当所述代码变更监听服务检测到代码文件的更新时，确定出现更新的代码文件；获取单元，用于获取出现更新的代码文件；调用单元，用于调用预先设置的浏览器刷新模块，所述浏览器刷新模块用于对浏览器进行自动刷新；刷新单元，用于通过所述浏览器刷新模块利用获取到的所述出现更新的代码文件自动刷新与所述出现更新的代码文件对应的原始代码文件，以对所述浏览器进行自动同步刷新。

可选地，还包括：配置监听文件单元，用于在前端系统全局安装gulp工具，以生成代码开发所需的运行环境；在所述运行环境下对每个开发项目单独配置gulp工具，以对每个开发项目单独配置运行环境；获取每个开发项目对应的配置文件，其中，所述配置文件包含有所有对应项目的文件名称；对所述配置文件中需要进行监听的文件名称进行标记。

可选地，所述启动单元还用于启动所述代码变更监听服务的监听功能；利用所述代码变更监听服务读取所述配置文件，从所述配置文件中确定存在标记的代码文件，作为所要监听的代码文件；利用所述代码变更监听服务对存在标记的代码文件进行监听。

可选地，所述启动单元还用于启动所述gulp工具；依次加载所述浏览器刷新模块、所述sass工具、所述pug工具、所述gulp-autoprefixer模块。

可选地，所述刷新单元还用于执行文件重新读取的任务，其中，所述任务用于读取所述出现更新的代码文件；利用读取到的所述出现更新的代码文件更新服务器后端的静态资源，使用所述browser-sync模块刷新系统重新获取更新后的静态资源。

为实现上述目的，本发明还提供一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

为实现上述目的，本发明还提供计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述方法的步骤。

本发明通过预先设置的在开发过程中监听代码文件的更新的代码更新监听服务，在开发过程中，启动该监听服务；判断代码变更监听服务是否检测到代码文件的更新；当代码变更监听服务检测到代码文件的更新时，确定出现更新的代码文件；获取出现更新的代码文件；调用预先设置的浏览器刷新模块，浏览器刷新模块用于对浏览器进行自动刷新；通过浏览器刷新模块利用获取到的出现更新的代码文件自动刷新浏览器上与出现更新的代码文件对应的原始代码文件，以对浏览器进行自动同步刷新。利用预设的浏览器刷新模块自动刷新浏览器，无需开发人员手动刷新，方便开发人员进行效果查看。

附图说明

图1为本发明实施例的自动同步刷新浏览器的方法的流程图；

图2为本发明对监听文件进行配置的流程图；

图3为本发明实施例的自动同步刷新浏览器的装置的程序模块示意图；

图4为本发明实施例的自动同步刷新浏览器的装置的硬件结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在介绍本发明实施例的技术方案之前，先对本方案所涉及到的工具和模块进行说明：

gulp工具：是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

sass工具：是一种css的开发工具，层叠样式表(英文全称：cascadingstylesheets)是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。

pug工具：是一款基于haml的html模版引擎，采用javacript实现，可以方便地在node.js、yeoman等框架中使用。

gulp-autoprefixer模块：用于设置浏览器版本自动处理浏览器前缀的工具。

browser-sync模块：是浏览器同步测试工具，browsersync能让浏览器实时、快速响应文件更改(html、js、css、sass、less等)并自动刷新页面。

npm工具：是随同nodejs一起安装的包管理工具,能解决nodejs代码部署上的很多问题。

本发明提供的自动同步刷新浏览器的方法、装置、计算机设备及存储介质，适用于前端开发技术领域，为开发人员在前端网站开发过程中，提供根据代码更新自动同步刷新浏览器的方法。本发明通过预先设置的在开发过程中监听代码文件的更新的代码更新监听服务，在开发过程中，启动该监听服务；判断代码变更监听服务是否检测到代码文件的更新；当代码变更监听服务检测到代码文件的更新时，确定出现更新的代码文件；获取出现更新的代码文件；调用预先设置的浏览器刷新模块，浏览器刷新模块用于对浏览器进行自动刷新；通过浏览器刷新模块利用获取到的出现更新的代码文件自动刷新浏览器上与出现更新的代码文件对应的原始代码文件，以对浏览器进行自动同步刷新。利用预设的浏览器刷新模块自动刷新浏览器，无需开发人员手动刷新，方便开发人员进行效果查看。

请参阅图1，本实施例的一种自动同步刷新浏览器的方法中，包括以下步骤：

步骤s101，启动代码变更监听服务，其中，代码变更监听服务用于在开发过程中监听代码文件的更新。

本发明实施例中，预先配置用于监听代码文件更新的代码变更监听服务，由该监听服务来监听代码的更新以及控制浏览器上自动同步刷新。

具体地，代码变更监听服务包括以下至少之一：gulp工具、浏览器刷新模块、sass工具、pug工具、gulp-autoprefixer模块；其中，浏览器刷新模块为browser-sync模块。

启动代码变更监听服务具体包括：启动gulp工具；依次加载浏览器刷新模块、sass工具、pug工具、gulp-autoprefixer模块，用以完成项目服务的启动。该项目服务器独立于后端，为前端提供一个运行环境，启用这个服务后只需在浏览器输入默认访问地址和配置的端口号，就可以访问系统，不需要依赖后端提供服务，相对的较为轻便，速度快。

步骤s102，判断代码变更监听服务是否检测到代码文件的更新。

代码文件的更新包括以下至少之一：新增或变更功能项、修改界面、修改处理逻辑。

具体地，研发人员在进行开发过程中，需要改动项目代码，在此过程中，根据开发过程的实际情况，对正在开发的项目代码进行改动，例如，新增或变更功能项、化界面、优化处理逻辑等，修改完代码之后，保存代码文件。

由于开发人员在进行开发的过程中，只有代码保存了才能算是代码更新，因此，本发明实施例中，代码变更监听服务可以通过监听是否存在保存代码文件的操作来判断是否有代码文件的更新，当有保存代码文件的操作时，确定有代码文件的更新；反之，则没有代码文件的更新。

本发明实施例中，当检测到代码文件更新时，执行步骤s103；如果没有检测到，则继续进行监听判断。

步骤s103，确定出现更新的代码文件。

在检测到代码文件的更新之后，只需要找到产生保存操作的代码文件即可。一种可选的实施方式，可以通过“修改时间”等属性来确定当前更新的代码文件。具体地，存储的代码文件可以具有对应的名称、修改时间、类型和大小等属性，其中，修改时间记录该代码文件最近的修改时间，类型记录该代码文件的文件类型，大小记录该代码文件占用的存储空间大小。当开发人员在编辑修改代码文件之后，对修改后的代码文件进行保存。在只修改代码文件内容的情况下，更改该代码文件的修改时间为当前修改的时间，并重新计算该修改后的代码文件的大小。在进行更新的代码文件检测的过程中，检测代码文件的修改时间是否发生变化，当代码文件的修改时间发生变化，则确定该代码文件为更新的代码文件。

步骤s104，获取出现更新的代码文件。

在确定出更新的代码文件之后，获取该更新的代码文件，以便于进行针对性更新。

步骤s105，调用预先设置的浏览器刷新模块，浏览器刷新模块用于对浏览器进行自动刷新。

该浏览器刷新模块可以是指browser-sync模块，可以是配置在代码变更监听服务的自动化脚本中。

步骤s106，通过浏览器刷新模块利用获取到的出现更新的代码文件自动刷新与出现更新的代码文件对应的原始代码文件，以对浏览器进行自动同步刷新。

由于代码都是以模块化的代码文件形式分布，当开发人员修改代码文件时，只是对代码文件中的代码进行修改编辑，并未刷新到浏览器当前运行的代码文件，因此，浏览器上依然运行显示的是未修改前的原始代码文件，修改更新的代码文件与原始代码文件可以通过文件名等形成对应，当开发人员触发编译运行时，触发浏览器运行更新的代码文件替换掉原始代码文件，实现刷新。

根据本发明实施例，通过预先设置的在开发过程中监听代码文件的更新的代码更新监听服务，在开发过程中，启动该监听服务；判断代码变更监听服务是否检测到代码文件的更新；当代码变更监听服务检测到代码文件的更新时，确定出现更新的代码文件；获取出现更新的代码文件；调用预先设置的浏览器刷新模块，浏览器刷新模块用于对浏览器进行自动刷新；通过浏览器刷新模块利用获取到的出现更新的代码文件自动刷新浏览器上与出现更新的代码文件对应的原始代码文件，以对浏览器进行自动同步刷新。利用预设的浏览器刷新模块自动刷新浏览器，无需开发人员手动刷新，方便开发人员进行效果查看。

如图2所示，本发明实施例，在启动代码变更监听服务之前，还需要对监听文件进行配置，具体包括：

步骤s1，在前端系统全局安装gulp工具，以生成代码开发所需的运行环境。

步骤s2，在运行环境下对每个开发项目单独配置gulp工具，以对每个开发项目单独配置运行环境。

步骤s3，获取每个开发项目对应的配置文件，其中，配置文件包含有所有对应项目的文件名称。

步骤s4，对配置文件中需要进行监听的文件名称进行标记。

在一个具体的实施例中，配置监听文件具体方式可以是：首先输入命令，可以使用fitbash或者命令控制台cmd等；然后创建一个项目文件夹，配置全局文件，安装gulp工具；之后在当前的项目文件夹下输入安装gulp命令，即在全局安装gulp后，还需要在每个要使用gulp的项目中单独安装。最后配置该项目的配置文件，在配置该配置文件的过程中，对需要进行监听的文件名称进行标记，以便于启动项目服务时，通过该标记确定出待监听的文件，对其内容的变更进行监听。

gulp工具的安装过程具体包括：

首先确保已经正确安装了nodejs环境。然后以全局方式安装gulp：

npminstall-ggulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npminstallgulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：

npminstall--save-devgulp

这样就完成了gulp的安装。

作为进一步可选的实施方式，本发明实施例的启动代码变更监听服务包括：启动代码变更监听服务的监听功能；利用代码变更监听服务读取配置文件，从配置文件中确定存在标记的代码文件，作为所要监听的代码文件；利用代码变更监听服务对存在标记的代码文件进行监听。

具体地，代码更新监听服务读取配置文件，获取需要监听的代码文件的标识，对其进行实时监听。可以通过配置文件中确定出预先进行标记的代码文件作为待监听的代码文件，更新浏览器时，仅更新该部分的代码文件，从而实现对配置的代码文件进行定点实时监控，降低代码文件之间的耦合性。

作为一种可选实施方式，本发明实施例中，通过浏览器刷新模块利用获取到的出现更新的代码文件自动刷与出现更新的代码文件对应的原始代码文件包括：执行文件重新读取的任务，其中，任务用于读取出现更新的代码文件；利用读取到的出现更新的代码文件更新服务器后端的静态资源，使用browser-sync模块刷新系统重新获取更新后的静态资源。

具体地，本发明实施例可以系统上配置npm工具，其包括gulp、browser-sync等第三方工具库，启动npm工具之后读取配置文件，再用gulp工具对文件进行监听，当文件发生变更时，执行文件重新读取的任务，更新本地服务器静态资源，再使用browser-sync刷新系统重新获取静态资源。

通过采用npm工具，可直接下载第三方的命令行程序或者文件到本地使用，更加便捷。

请继续参阅图3，示出了一种自动同步刷新浏览器的装置，在本实施例中，自动同步刷新浏览器的装置10可以包括或被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本发明，并可实现上述自动同步刷新浏览器的方法。本发明所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，比程序本身更适合于描述自动同步刷新浏览器的装置10在存储介质中的执行过程。以下描述将具体介绍本实施例各程序模块的功能：

启动单元31，用于启动代码变更监听服务，其中，所述代码变更监听服务用于在开发过程中监听代码文件的更新。

本发明实施例中，预先配置用于监听代码文件更新的代码变更监听服务，由该监听服务来监听代码的更新以及控制浏览器上自动同步刷新。

判断单元32，用于判断所述代码变更监听服务是否检测到代码文件的更新。

确定单元33，用于当所述代码变更监听服务检测到代码文件的更新时，确定出现更新的代码文件；

在检测到代码文件的更新之后，只需要找到产生保存操作的代码文件即可。一种可选的实施方式，可以通过“修改时间”等属性来确定当前更新的代码文件。

获取单元34，用于获取出现更新的代码文件。

在确定出更新的代码文件之后，获取该更新的代码文件，以便于进行针对性更新。

调用单元35，用于调用预先设置的浏览器刷新模块，所述浏览器刷新模块用于对浏览器进行自动刷新。

该浏览器刷新模块可以是指browser-sync模块，可以是配置在代码变更监听服务的自动化脚本中。

刷新单元36，用于通过所述浏览器刷新模块利用获取到的所述出现更新的代码文件自动刷新与所述出现更新的代码文件对应的原始代码文件，以对所述浏览器进行自动同步刷新。

根据本发明实施例，通过预先设置的在开发过程中监听代码文件的更新的代码更新监听服务，在开发过程中，启动该监听服务；判断代码变更监听服务是否检测到代码文件的更新；当代码变更监听服务检测到代码文件的更新时，确定出现更新的代码文件；获取出现更新的代码文件；调用预先设置的浏览器刷新模块，浏览器刷新模块用于对浏览器进行自动刷新；通过浏览器刷新模块利用获取到的出现更新的代码文件自动刷新浏览器上与出现更新的代码文件对应的原始代码文件，以对浏览器进行自动同步刷新。利用预设的浏览器刷新模块自动刷新浏览器，无需开发人员手动刷新，方便开发人员进行效果查看。

可选地，本发明实施例所述的装置还包括：配置监听文件单元，用于在前端系统全局安装gulp工具，以生成代码开发所需的运行环境；在所述运行环境下对每个开发项目单独配置gulp工具，以对每个开发项目单独配置运行环境；获取每个开发项目对应的配置文件，其中，所述配置文件包含有所有对应项目的文件名称；对所述配置文件中需要进行监听的文件名称进行标记。

可选地，所述启动单元还用于启动所述代码变更监听服务的监听功能；利用所述代码变更监听服务读取所述配置文件，从所述配置文件中确定存在标记的代码文件，作为所要监听的代码文件；利用所述代码变更监听服务对存在标记的代码文件进行监听。

可选地，所述启动单元还用于启动所述gulp工具；依次加载所述浏览器刷新模块、所述sass工具、所述pug工具、所述gulp-autoprefixer模块。

可选地，所述刷新单元还用于执行文件重新读取的任务，其中，所述任务用于读取所述出现更新的代码文件；利用读取到的所述出现更新的代码文件更新服务器后端的静态资源，使用所述browser-sync模块刷新系统重新获取更新后的静态资源。

本发明实施例的装置部分的功能描述具体见上述方法部分，这里不再赘述。

本实施例还提供一种计算机设备，如可以执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。本实施例的计算机设备20至少包括但不限于：可通过系统总线相互通信连接的存储器21、处理器22，如图4所示。需要指出的是，图4仅示出了具有组件21-22的计算机设备20，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

本实施例中，存储器21包括可读存储介质，具体包括包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器21可以是计算机设备20的内部存储单元，例如该计算机设备20的硬盘或内存。在另一些实施例中，存储器21也可以是计算机设备20的外部存储设备，例如该计算机设备20上配备的插接式硬盘，智能存储卡(smartmediacard,smc)，安全数字(securedigital,sd)卡，闪存卡(flashcard)等。当然，存储器21还可以既包括计算机设备20的内部存储单元也包括其外部存储设备。本实施例中，存储器21通常用于存储安装于计算机设备20的操作系统和各类应用软件，例如实施例的自动同步刷新浏览器的装置10的程序代码等。此外，存储器21还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器22在一些实施例中可以是中央处理器(centralprocessingunit，cpu)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器22通常用于控制计算机设备20的总体操作。本实施例中，处理器22用于运行存储器21中存储的程序代码或者处理数据，例如运行自动同步刷新浏览器的装置10，以实现实施例的自动同步刷新浏览器的方法。

本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘、服务器、app应用商城等等，其上存储有计算机程序，程序被处理器执行时实现相应功能。本实施例的计算机可读存储介质用于存储自动同步刷新浏览器的装置10，被处理器执行时实现实施例的自动同步刷新浏览器的方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。