本申请提供了一种Web前端本地开发环境的搭建方法和装置。其中所述方法包括：预置本地代理服务器；由所述本地代理服务器接收客户端发送的网页访问请求，所述网页访问请求中包含网页资源文件的信息；根据所述网页资源文件的信息，判断在所述本地代理服务器中是否存在对应的文件；若是，则从本地代理服务器中提取相应的文件；若否，则所述本地代理服务器向内容分发网络CDN服务器发起对应文件的获取请求，并接收所述内容分发网络CDN服务器返回的对应文件；当所述文件有多个时，由所述本地代理服务器合并所获得的文件后返回客户端。本申请能够减轻前端代码发布上线操作的复杂度，提高开发效率，并降低开发和修改调试文件的风险。
【技术实现步骤摘要】
本申请涉及本地开发环境搭建的
，特别是涉及ー种Web前端本地开发环境的搭建方法，和ー种Web前端本地开发环境的搭建装置。
技术介绍
在网站开发和运行过程中，需要搭建Web前端开发环境对网站的项目开发，对存在问题的内容进行修改和调试。现有技术中，Web前端开发环境常常需要用到CDN(内容分发网络)服务器，具体而言，正常访问网页时会附帯访问很多资源文件，比如css、js文件，CDN服务器就是存放这些css和js文件的服务器，CDN服务器具有文件合并输出的功能，所以通过CDN服务器后，附带访问的资源文件会合并为一个URL(Uniform Resource Locator,统ー资源定位符，即网页地址)输出。例如，对于类似http://a.tbcdn.cn/a.js, b.js, c.js 的 URL, CDN 服务器可以将其中的a.js，b.js和c.js合并为ー个URL输出，这样就不用发起三次请求分别获取这三个文件了，或如，访问这个URL:http://a-tbcdn.cn/s/kissy/1.1.6/kissy-min.js, p/global/1.0/global-min.js,得到的结果就是kissy-min.js和globalnin.js这两个文件合并后的结果。⑶N服务器这种文件合并输出的功能被称作“combo”。Web前端开发工程师在每次对网站的项目开发过程中，对存在问题的内容进行修改和调试都需要把相关文件上传到CDN服务器上进行调试和测试，由于操作都需要CDN服务器上完成，如果是项目新增的功能，待修改的源文件在CDN服务器上可能已经存在，这样上传新文件覆盖CDN服务器上的源文件势必造成很多风险，再者，前端代码发布上线操作非常复杂，Web前端开发工程师在线上环境的操作很不方便，不仅不能解决所有的修改调试问题，还十分影响开发效率。因此，目前本领域技术人员所急需要解决的问题是:从而减轻前端代码发布上线操作的复杂度，提高开发效率，并降低开发和修改调试文件的风险。
技术实现思路
本申请所要解决的技术问题是提供ー种Web前端本地开发环境的搭建方法，用以减轻前端代码发布上线操作的复杂度，提高开发效率，并降低开发和修改调试文件的风险。本申请还提供了ー种Web前端本地开发环境的搭建装置，用以保证上述方法在实际中的应用及实现。为了解决上述问题，本申请实施例公开了ー种Web前端本地开发环境的搭建方法，包括:预置本地代理服务器；由所述本地代理服务器接收客户端发送的网页访问请求， 所述网页访问请求中包含网页资源文件的信息；根据所述网页资源文件的信息，判断在所述本地代理服务器中是否存在对应的文件；若是，则从本地代理服务器中提取相应的文件；若否，则所述本地代理服务器向内容分发网络CDN服务器发起对应文件的获取请求，并接收所述内容分发网络CDN服务器返回的对应文件；当所述文件有多个时，由所述本地代理服务器合并所获得的文件后返回客户端。优选的是，所述的方法，还包括:当所述文件为ー个吋，由所述本地代理服务器直接将所获得的文件后返回客户端。优选的是，所述网页访问请求中包含多个网页资源文件的信息，所述的方法还包括:将所述从本地代理服务器中提取的相应文件写入预设的缓存中；和/或，将所接收的从内容分发网络CDN服务器返回的对应文件写入预设的缓存中；所述由本地代理服务器合并所获得的文件后返回客户端的步骤进一歩包括:本地代理服务器合并所述预设缓存中的文件；将合并后的文件返回客户端。优选的是，所述本地代理服务器合并所述预设缓存中的文件的步骤进一歩包括:判断所述预设缓存中的文件是否包含压缩混淆代码；若是，则将所述压缩混淆代码转换为源代码后再进行文件合并操作；若否，则直接进行文件合并操作。优选的是，所述文件合并操作为使用嵌入超文本标记语言文档的脚本语言PHP通过合并字符串的方式完成。优选的是，所述方法中，本地代理服务器使用Web服务器软件Apache搭建。优选的是，所述网页访问请求中包含一个网页资源文件的信息，在所述本地代理服务器接收所述内容分发网络CDN服务器返回的对应文件的步骤之前，所述的方法还包括:内容分发网络⑶N服务器通过Web服务器软件Apache的重定向Rewrite规则将所述文件的请求重定向到目标网页地址，从所述目标网页地址提取相应的文件，并将所述文件返回本地代理服务器。优选的是，所述网页访问请求中包含多个网页资源文件的信息，在所述本地代理服务器接收所述内容分发网络CDN服务器返回的对应文件的步骤之前，所述的方法还包括:内容分发网络⑶N服务器通过库函数file ()提取所请求的文件，并将所述文件返回本地代理服务器。本申请实施例还公开了ー种Web前端本地开发环境的搭建装置，包括:本地代理服务器设置模块:用于预置本地代理服务器；网页访问请求接收模块:用于由所述本地代理服务器接收客户端发送的网页访问请求，所述网页访问请求中包含网页资源文件的信息；文件位置判断模块:用于根据所述网页资源文件的信息判断在所述本地代理服务器中是否存在对应的文件；若是，则调用本地提取模块；若否，则调用线上获取模块和文件接收模块；本地提取模块:用于从本地代理服务器中提取相应的文件；线上获取模块:用于所述本地代理服务器向内容分发网络⑶N服务器发起对应文件的获取请求；文件接收模块:用于接收所述内容分发网络CDN服务器返回的对应文件；文件合并输出模块:用于在所述文件有多个时，由所述本地代理服务器合并所获得的文件后返回客户端。优选的是，所述的装置，还包括:文件输出模块:用于在所述文件为ー个吋，由所述本地代理服务器直接将所获得的文件后返回客户端。与现有技术相比，本申请具有以下优点:本申请通过预置本地代理服务器模拟CDN服务器搭建本地开发环境，所述本地开发环境可以实现本地文件和线上文件的抓取和合并，并将合并结果一井返回客户端。使Web前端开发工程师可以无缝地使用本地开发环境进行项目的开发和调试，而不需要毎次上传到CDN服务器上进行调试和测试，项目直到测试通过后才一次性将文件上传到CDN服务器，从而减轻了前端代码发布上线操作的复杂度，提高了开发效率，并降低了开发和修改调试文件的风险。本申请还通过代理程序使用PHP用于多个文件的本地抓取和异地抓取；使用库函数fileO来抓取CDN服务器上的文件。实现了多个文件的同时抓取，以及本地文件和线上文件的同时抓取。从而方便了开发调试的操作，提高了开发调试的效率。附图说明图1是本申请的ー种Web前端本地开发环境的搭建方法实施例1的步骤流程图；图2是本申请的ー种Web前端本地开发环境的搭建方法实施例2的步骤流程图；图3是本申请的ー种Web前端本地开发环境的搭建方法实施例3的步骤流程图；图4是本申请的ー种Web前端本地开发环境的搭建装置的结构流程图。具体实施例方式为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。本专利专利技术人注意到，在现有技术中，Web前端的开发环境依赖于线上的⑶N服务器实现，然而在实际中，Web前端开发工程师开发项目不可能毎次修改调试都将文件传到CDN服务器上，而最好是在本地修改调试项目直到没有bug (漏洞)，再一并将资源文件(css/js文件)发布到⑶N服务本文档来自技高网...
【技术保护点】
一种Web前端本地开发环境的搭建方法，其特征在于，包括：预置本地代理服务器；由所述本地代理服务器接收客户端发送的网页访问请求，所述网页访问请求中包含网页资源文件的信息；根据所述网页资源文件的信息，判断在所述本地代理服务器中是否存在对应的文件；若是，则从本地代理服务器中提取相应的文件；若否，则所述本地代理服务器向内容分发网络CDN服务器发起对应文件的获取请求，并接收所述内容分发网络CDN服务器返回的对应文件；当所述文件有多个时，由所述本地代理服务器合并所获得的文件后返回客户端。
【技术特征摘要】
1.一种Web前端本地开发环境的搭建方法，其特征在于，包括: 预置本地代理服务器； 由所述本地代理服务器接收客户端发送的网页访问请求，所述网页访问请求中包含网页资源文件的信息； 根据所述网页资源文件的信息，判断在所述本地代理服务器中是否存在对应的文件； 若是，则从本地代理服务器中提取相应的文件； 若否，则所述本地代理服务器向内容分发网络CDN服务器发起对应文件的获取请求，并接收所述内容分发网络CDN服务器返回的对应文件； 当所述文件有多个时，由所述本地代理服务器合并所获得的文件后返回客户端。2.按权利要求1所述的方法，其特征在于，还包括: 当所述文件为ー个时，由所述本地代理服务器直接将所获得的文件后返回客户端。3.按权利要求1或2所述的方法，其特征在于，所述网页访问请求中包含多个网页资源文件的信息，所述的方法还包括: 将所述从本地代理服务器中提取的相应文件写入预设的缓存中； 和/或，将所接收的从内容分发网络CDN服务器返回的对应文件写入预设的缓存中； 所述由本地代理服务器合并所获得的文件后返回客户端的步骤进一歩包括: 本地代理服务器合并所述预设缓存中的文件； 将合并后的文件返回客户端。4.按权利要求3所述的方法，其特征在于，所述本地代理服务器合并所述预设缓存中的文件的步骤进一歩包括: 判断所述预设缓存中的文件是否包含压缩混淆代码； 若是，则将所述压缩混淆代码转换为源代码后再进行文件合并操作； 若否，则直接进行文件合并操作。5.按权利要求4所述的方法，其特征在干，所述文件合并操作为使用嵌入超文本标记语言文档的脚本语言PHP通过合并字符串的方式完成。6.按权利要求1或2所述的方法，其特征在于，所述本地代理服务器使用Web服务器软件Apache搭建。7....
【专利技术属性】
技术研发人员：李晶，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。