(10)申请公布号 (43)申请公布日 2014.11.05
C N 104133685
A (21)申请号 201410381901.X
(22)申请日 2014.08.05
G06F 9/44(2006.01)
(71)申请人广州唯品会网络技术有限公司
地址510000 广东省广州市荔湾区芳村大道
中路314号自编之二
(72)发明人陈弋 刘辉
(74)专利代理机构广州华进联合专利商标代理
有限公司 44224
代理人周清华
王东亮
(54)发明名称
(57)摘要
本发明公开了一种网站前端开发的方法与系
式，将基于Jekins/Huson 服务器的编译流程改为
本地编译，极大的提升了编译效率，并且和SVN 整
合，从而可以随时提交，实时编译。同时添加了针
本号，保证了版本号的准确性和唯一性。本发明
的方法与系统针对网站前端开发流程中的每个
步骤实现一个个自动化的任务，整个工作流基于
node.js 的Grunt 命令行工具，串联了网站前端
开发的整个流程，通过本地配置文件的方式，自动
化整个流程，方便了流程在团队间统一、共享和协
作。
(51)Int.Cl.
权利要求书2页 说明书6页 附图2页
(19)中华人民共和国国家知识产权局(12)发明专利申请权利要求书2页 说明书6页 附图2页(10)申请公布号CN 104133685 A
1.一种网站前端开发的方法，其特征在于，包括以下步骤，且以下步骤的执行以node. js的Grunt命令行工具为基础：
配置项目：建立项目配置文件，该文件中包含网站前端待开发项目的名称、描述、分支名、SVN服务器地址及对应的本地开发服务器地址；
初始化项目：利用grunt-shell插件调用SVN命令，按照所述项目配置文件中指定的分支名称，新建并检出开发和测试分支；
开发编码实现：更改hosts文件，将静态资源域名映射到本地，解析静态资源请求，返回响应本地对应的文件；利用grunt-contrib-watch插件监听所述项目配置文件的模板分支里面HTML文件的更改，通过grunt-ssh插件将更改的文件通过SSH同步到本地开发服务器，使SVN服务器与本地开发服务器无缝同步；
编译代码：通过grunt-closurecompiler插件，利用google-closurecompiler编译压缩开发分支里面的Javascript代码到对应的测试分支；通过grunt-contrib-csslint插件压缩开发分支里面的CSS文件到对应的测试分支目录，遍历CSS文件内所有的图片引用，通过md5获取对应图片文件的hash值，取8位作为图片的版本号添加到图片引用处；通过grunt-contrib-imagemin插件压缩优化开发分支里面的PNG/JPEG图片到对应的测试分支目录；
上传代码：通过grunt-shell插件调用svn commit命令，同时提交开发和测试分支，在提交之前进行编译。
2.根据权利要求1所述的网站前端开发的方法，其特征在于，对开发和测试分支进行编译的过程如下：
调用svn update分别更新开发和测试分支；
在开发分支svn status获取更改的文件列表；
调用grunt build开始编译更改过的文件到测试分支；
调用svn commit提交开发和测试分支；
保存提交的文件列表到一个对应项目的CHANGELOG文件。
3.根据权利要求1或2所述的网站前端开发的方法，其特征在于，与编译代码的步骤对应的任务为grunt build任务，该任务接受不同的参数，按照不同的条件编译：grunt build 只编译更改过的文件；
grunt build:noimage 只编译CSS和JavaScript文件；
grunt build:changelog -只编译配置指定的文件；
grunt build:all 编译所有静态资源。
4.根据权利要求1或2所述的网站前端开发的方法，其特征在于，还包括步骤：
将所有host文件以.hosts后缀名作为标注，并放在一个hosts文件夹在进行不同开发环境之间hosts切换时，将对应指定的hosts文件内容写入系统的host配置文件。
5.根据权利要求1或2所述的网站前端开发的方法，其特征在于，还包括步骤：
利用jshint和csslint分别对JavaScript代码和CSS代码做代码检查。
6.一种网站前端开发的系统，其特征在于，包括以下单元，且以下单元以node.js的Grunt命令行工具为基础：
项目配置单元：用于建立项目配置文件，该文件中包含网站前端待开发项目的名称、描
述、分支名、SVN服务器地址及对应的本地开发服务器地址；
项目初始化单元：用于利用grunt-shell插件调用SVN命令，按照所述项目配置文件中指定的分支名称，新建并检出开发和测试分支；
编码开发单元：用于更改hosts文件，将静态资源域名映射到本地，解析静态资源请求，返回响应本地对应的文件；利用grunt-contrib-watch插件监听所述项目配置文件的模板分支里面HTML文件的更改，通过grunt-ssh插件将更改的文件通过SSH同步到本地开发服务器，使SVN服务器与本地开发服务器无缝同步；
代码编译单元：用于通过grunt-closurecompiler插件，利用google-closurecompiler编译压缩开发分支里
面的Javascript代码到对应的测试分支；通过grunt-contrib-csslint插件压缩开发分支里面的CSS文件到对应的测试分支目录，遍历CSS文件内所有的图片引用，通过md5获取对应图片文件的hash值，取8位作为图片的版本号添加到图片引用处；通过grunt-contrib-imagemin插件压缩优化开发分支里面的PNG/JPEG图片到对应的测试分支目录；
代码上传单元：用于通过grunt-shell插件调用svn commit命令，同时提交开发和测试分支，在提交之前进行编译。
7.根据权利要求6所述的网站前端开发的系统，其特征在于，所述代码上传模块对开发和测试分支进行编译的过程如下：
调用svn update分别更新开发和测试分支；
在开发分支svn status获取更改的文件列表；
调用grunt build开始编译更改过的文件到测试分支；
调用svn commit提交开发和测试分支；
保存提交的文件列表到一个对应项目的CHANGELOG文件。
8.根据权利要求6或7所述的网站前端开发的系统，其特征在于，与所述代码编译单元对应的任务为grunt build任务，该任务接受不同的参数，按照不同的条件编译：grunt build 只编译更改过的文件；
grunt build:noimage 只编译CSS和JavaScript文件；
grunt build:changelog -只编译配置指定的文件；
grunt build:all 编译所有静态资源。
9.根据权利要求6或7所述的网站前端开发的系统，其特征在于，还包括host文件编辑模块：用于将所有host文件以.hosts后缀名作为标注，并放在一个hosts文件夹在进行不同开发环境之间hosts切换时，将对应指定的hosts文件内容写入系统的host配置文件。
10.根据权利要求6或7所述的网站前端开发的系统，其特征在于，还包括代码检查模块：用于利用jshint和csslint分别对JavaScript代码和CSS代码做代码检查。
网站前端开发的方法与系统
技术领域
[0001] 本发明涉及网络开发技术领域，特别是涉及一种网站前端开发的方法与系统。
背景技术
[0002] 网站前端开发涉及的工作内容相当繁杂，因为开发语言语法松散的特点，在开发过程中需要代码检查排除一部分低级错误。为了最优化网络访问，需要对前端资源(HTML、CSS、JavaScript、Image)做各种优化处理，比如合并文件，压缩文件等等，发布后的静态资源缓存更新管理，以及和后端服务器协同开发，不同开发环境的切换配置。这些繁琐重复的工作会严重影响前端开发的工作效率。
发明内容
[0003] 基于上述情况，本发明提出了一种网站前端开发的方法与系统，以实现自动化前端开发工作流程，提高网站前端开发的效率。为此，采用的方案如下。
[0004] 一种网站前端开发的方法，包括以下步骤，且以下步骤的执行以node.js的Grunt 命令行工具为基础：
[0005] 配置项目：建立项目配置文件，该文件中包含网站前端待开发项目的名称、描述、分支名、SVN服务器地址及对应的本地开发服务器地址；
[0006] 初始化项目：利用grunt-shell插件调用SVN命令，按照所述项目配置文件中指定的分支名称，新建并检出开发和测试分支；
[0007] 开发编码实现：更改hosts文件，将静态资源域名映射到本地，解析静态资源请求，返回响应本地对应的文件；利用grunt-contrib-watch插件监听所述项目配置文件的模板分支里面HTML文件的更改，通过grunt-ssh插件将更改的文件通过SSH同步到本地开发服务器，使SVN服务器与本地开发服务器无缝同步；
[0008] 编译代码：通过grunt-closurecompiler插件，利用google-closurecompiler编译压缩开发分支里面的Javascript代码到对应的测试分支；通过grunt-contrib-csslint 插件压缩开发分支里面的CSS文件到对应的测试分支目录，遍历CSS文件内所有的图片引用，通过md5获取对应图片文件的hash值，取8位作为图片的版本号添加到图片引用处；通过grunt-contrib-imagemin插件压缩优化开发分支里面的PNG/JPEG图片到对应的测试分支目录；
[0009] 上传代码：通过grunt-shell插件调用svn commit命令，同时提交开发和测试分支，在提交之前进行编译。
[0010] 一种网站前端开发的系统，包括以下单元，且以下单元以node.js的Grunt命令行工具为基础：
[0011] 项目配置单元：用于建立项目配置文件，该文件中包含网站前端待开发项目的名称、描述、分支名、SVN服务器地址及对应的本地开发服务器地址；
[0012] 项目初始化单元：用于利用grunt-shell插件调用SVN命令，按照所述项目配置文
件中指定的分支名称，新建并检出开发和测试分支；
[0013] 编码开发单元：用于更改hosts文件，将静态资源域名映射到本地，解析静态资源请求，返回响应本地对应的文件；利用grunt-contrib-watch插件监听所述项目配置文件的模板分支里面HTML文件的更改，通过grunt-ssh插件将更改的文件通过SSH同步到本地开发服务器，使SVN服务器与本地开发服务器无缝同步；
[0014] 代码编译单元：用于通过grunt-closurecompiler插件，利用google-closurecompiler编译压缩开发分支里面的Javascript代码到对应的测试分支；通过grunt-contrib-csslint插件压缩开发分支里面的CSS文件到对应的测试分支目录，遍历CSS文件内所有的图片引用，通过md5获取对应图片文件的hash值，取8位作为图片的版本号添加到图片引用处；通过grunt-contrib-imagemin插件压缩优化开发分支里面的PNG/JPEG图片到对应的测试分支目录；
[0015] 代码上传单元：用于通过grunt-shell插件调用svn commit命令，同时提交开发和测试分支，在提交之前进行编译。
[0016] 本发明网站前端开发的方法与系统，改进了网站前端静态资源的编译优化处理方式，将基于Jekins/Huson服务器的编译流程改为本地编译，极大的提升了编译效率，并且和SVN整合，从而可以随时提交，实时编译。同时添加了针对图片文件的压缩处理，引用hash值作为图片版本号，保证了版本号
的准确性和唯一性。总之，本发明的方法与系统针对网站前端开发流程中的每个步骤实现一个个自动化的任务，整个工作流基于node.js的Grunt命令行工具，串联了网站前端开发的整个流程，通过本地配置文件的方式，自动化整个流程，方便了流程在团队间统一、共享和协作。
附图说明
[0017] 图1为本发明网站前端开发的方法的流程示意图；
[0018] 图2为本发明网站前端开发的系统的结构示意图。
具体实施方式
[0019] 为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步的详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不限定本发明的保护范围。
[0020] 一个典型的网站前端开发工作流程，包含5个方面：
[0021] 1、新建一个项目；
[0022] 2、开发编码实现；
[0023] 3、编译优化前端资源；
[0024] 4、测试；
[0025] 5、发布。
[0026] 新建一个项目需要：
[0027] 从central代码库新建一个开发分支；
[0028] 从trunk代码库新建一个测试分支；
[0029] 从SVN检出开发和测试分支。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议