网站前端开发的方法与系统

摘要

本发明公开了一种网站前端开发的方法与系统，改进了网站前端静态资源的编译优化处理方式，将基于Jekins/Huson服务器的编译流程改为本地编译，极大的提升了编译效率，并且和SVN整合，从而可以随时提交，实时编译。同时添加了针对图片文件的压缩处理，引用hash值作为图片版本号，保证了版本号的准确性和唯一性。本发明的方法与系统针对网站前端开发流程中的每个步骤实现一个个自动化的任务，整个工作流基于node.js的Grunt命令行工具，串联了网站前端开发的整个流程，通过本地配置文件的方式，自动化整个流程，方便了流程在团队间统一、共享和协作。

主权项

一种网站前端开发的方法，其特征在于，包括以下步骤，且以下步骤的执行以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命令，同时提交开发和测试分支，在提交之前进行编译。