(10)申请公布号
(43)申请公布日 (21)申请号 201510358865.X
(22)申请日 2015.06.25
G06F 9/44(2006.01)
G06F 9/45(2006.01)
(71)申请人北京京东尚科信息技术有限公司
地址100080 北京市海淀区杏石口路65号
西杉创意园西区11C 楼东段1-4层西段
1-4层
申请人北京京东世纪贸易有限公司
(72)发明人刘威 罗均波 巫耀恒 陈晓春
王少星
(74)专利代理机构北京品源专利代理有限公司
11332
代理人
孟金喆 胡彬
(54)发明名称
(57)摘要
本发明实施例提供一种网站前端开发方法及
进行优化处理并输出至开发页面，将优化结果上
传至测试服务器，将通过测试的优化结果发布至
内容分发网络服务器。其中，静态资源包括模块文
件，所述模块文件中包括模板文件、JS 文件和CSS 文件。本发明实施例通过采用上述技术方案，可在
本地使用同一个开发工具贯穿完整的web 前端开
发流程，可用该工具中的命令将每个流程步骤单
独处理，且达到了将原本相互分离的各开发过程
整合到一起的目的，省去开发过程中在不同工具
之间进行切换的繁琐步骤，简单便捷，方便开发人
员之间的代码共享和沟通，从而提高开发效率。(51)Int.Cl.
(19)中华人民共和国国家知识产权局(12)发明专利申请权利要求书2页 说明书6页 附图3页
(10)申请公布号CN 104978194 A (43)申请公布日2015.10.14
C N 104978194
A
1.一种网页前端开发方法，其特征在于，包括：
建立项目开发目录；
对所述项目开发目录中的静态资源进行实时编译；
对编译结果进行优化处理并输出至开发页面；
将优化结果上传至测试服务器；
将通过测试的优化结果发布至内容分发网络服务器；
其中，所述静态资源包括模块文件，所述模块文件中包括模板文件、JavaScript文件和层叠样式表文件。
2.根据权利要求1所述的方法，其特征在于，在建立项目开发目录之后，还包括：
当所述项目开发目录中的静态资源发生变化时，自动编译变化后的静态资源并同步至用于存储优化结果的与所述项目开发目录对应的缓存目录，同时自动刷新浏览器页面。
3.根据权利要求1所述的方法，其特征在于，在对项目中的静态资源进行实时编译时，还包括：
当检测到代码错误时，输出出错提示信息至所述开发页面。
4.根据权利要求1所述的方法，其特征在于，所述对编译结果进行优化处理，包括：
为所述编译结果中的静态资源添加统一的内容分发网络前缀，并采用版本号非覆盖递增方式进行命名；
分别对上述静态资源中的多个JavaScript文件和多个层叠样式表文件进行合并和压缩。
5.根据权利要求1所述的方法，其特征在于，将优化结果输出至开发页面，包括：
将优化结果中的数据信息输出至开发页面；
将所述模块文件依赖的JavaScript文件路径信息及层叠样式表文件路径信息输出至开发页面。
6.一种网页前端开发装置，其特征在于，包括：
目录建立模块，用于建立项目开发目录；
静态资源编译模块，用于对所述项目开发目录中的静态资源进行实时编译；
优化处理模块，用于对编译结果进行优化处理并输出至开发页面；
上传模块，用于将优化结果上传至测试服务器；
发布模块，用于将通过测试的优化结果发布至内容分发网络服务器；
其中，所述静态资源包括模块文件，所述模块文件中包括模板文件、JavaScript文件和层叠样式表文件。
7.根据权利要求6所述的装置，其特征在于，还包括：
同步模块，用于在建立项目开发目录之后，当所述项目开发目录中的静态资源发生变化时，自动编译变化后的静态资源并同步至用于存储优化结果的与所述项目开发目录对应的缓存目录，同时自动刷新浏览器页面。
8.根据权利要求6所述的装置，其特征在于，还包括：
错误提示模块，用于在对项目中的静态资源进行实时编译时，如果检测到代码错误，则输出出错提示信息至所述开发页面。
9.根据权利要求6所述的装置，其特征在于，所述优化处理模块具体用于：
为所述编译结果中的静态资源添加统一的内容分发网络前缀，并采用版本号非覆盖递增方式进行命名；
分别对上述静态资源中的多个JavaScript文件和多个层叠样式表文件进行合并和压缩。
10.根据权利要求6所述的装置，其特征在于，所述优化处理模块具体用于：
将优化结果中的数据信息输出至开发页面；
将所述模块文件依赖的JavaScript文件路径信息及层叠样式表文件路径信息输出至开发页面。
一种网页前端开发方法及装置
技术领域
[0001] 本发明实施例涉及互联网技术领域，尤其涉及一种网页前端开发方法及装置。
背景技术
[0002] 随着前端技术在网页web开发中日益重要，前端开发人员在项目中占比越来越大，开发人员之间的代码共享和沟通也越来越重要。然而，web前端开发的内容繁多，用于开发的工具功能单一且质量参差不齐。为了满足整个开发流程中各个步骤的不同需求，需要使用多种开发工具，例如，在对静态文件进行压缩合并时，需要使用不同的文件传输协议(File Transfer Protocol，FTP)软件上传项目中的静态文件至测试服务器等等。不同工具之间的配合能力往往较差，所以会严重影响前端开发人员的工作效率。
发明内容
[0003] 本发明实施例的目的是提出一种网页前端开发方法及装置，以解决网页前端开发效率较低的问题。
[0004] 一方面，本发明实施例提供了一种网页前端开发方法，包括：
[0005] 建立项目开发目录；
[0006] 对所述项目开发目录中的静态资源进行实时编译；
[0007] 对编译结果进行优化处理并输出至开发页面；
[0008] 将优化结果上传至测试服务器；
[0009] 将通过测试的优化结果发布至内容分发网络服务器；
[0010] 其中，所述静态资源包括模块文件，所述模块文件中包括模板文件、JavaScript(JS)文件和层叠样式表(Cascading Style Sheets，CSS)文件。
[0011] 另一方面，本发明实施例提供了一种网页前端开发装置，包括：
[0012] 目录建立模块，用于建立项目开发目录；
[0013] 静态资源编译模块，用于对所述项目开发目录中的静态资源进行实时编译；[0014] 优化处理模块，用于对编译结果进行优化处理并输出至开发页面；
[0015] 上传模块，用于将优化结果上传至测试服务器；
[0016] 发布模块，用于将通过测试的优化结果发布至内容分发网络服务器；
[0017] 其中，所述静态资源包括模块文件，所述模块文件中包括模板文件、JavaScript文件和层叠样式表文件。
[0018] 本发明实施例中提供的网页前端开发方案，在建立项目开发目录后，对项目开发目录中的静态资源进行实时编译，其中，静态资源包括包含了模板文件、JS文件和CSS文件的模块文件，实现了对静态资源的模块化编译。随后，对编译结果进行优化处理并输出至开发页面，并上传至测试服务器，最后将通过测试的优化结果发布至内容分发网络服务器。通过采用上述技术方案，可在本地使用同一个开发工具贯穿完整的web前端开发流程，可用该工具中的命令将每个流程步骤单独处理，且达到了将原本相互分离的各开发过程整合到
一起的目的，省去开发过程中在不同工具之间进行切换的繁琐步骤，简单便捷，方便开发人员之间的代码共享和沟通，从而提高开发效率。
附图说明
[0019] 图1为本发明实施例一提供的一种网页前端开发方法的流程示意图；
[0020] 图2为本发明实施例一提供的一种优选的基于JDF的web前端开发流程示意图；[0021] 图3为本
发明实施例二提供的一种网页前端开发装置的结构框图。
具体实施方式
[0022] 下面结合附图并通过具体实施方式来进一步说明本发明的技术方案。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。
[0023] 实施例一
[0024] 图1为本发明实施例一提供的一种网页前端开发方法的流程示意图，该方法可以由网页前端开发装置执行，其中该装置可由软件和/或硬件实现。如图1所示，该方法包括：
[0025] 步骤101、建立项目开发目录。
[0026] 示例性的，用于执行本实施例方法的装置可视为一种前端开发工具，可命名为京东前端开发工具(JingDong Front End Tools，JDF)。开始开发项目时，可使用jdf install init命令生成标准化、符合规范的项目开发目录，开始项目开发。
[0027] 步骤102、对项目开发目录中的静态资源进行实时编译。
[0028] 其中，静态资源包括模块文件，模块文件中包括模板文件、JS文件和CSS文件。模板文件具体可为velocity模板文件。
[0029] 示例性的，可在当前项目开发目录下使用jdf build命令，启动本地服务器，然后利用静态文件编译引擎对项目开发目录中的静态资源进行实时编译。
[0030] 以下给出一个对模块文件进行编译的实例：
[0031] 比如ui-product-list为一个模块文件，其中包含了velocity模板文件、JS文件和CSS文件。在开发页面应用本实施例的方法时，可在开发页面输入{％widget name＝“ui-product-list”％}
[0032] 进行编译后如下：
[0033]
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议