欢迎访问南数互联官方网站,始于2004年专注中、高端网站制作服务东莞网站建设服务商,您的营销型网站建设顾问! 网站TAG|网站地图| 支付方式| 全站导航

对Web前端构建工具版本号管理方案出台的思考!

Web前端开发 前端开发工具 NodeJS

        前端构建工具满天飞的情景下,笔者也忍不住去捣鼓了一下,真正体验一下NODEJS带来的魅力,经过一段时间规划设计,终于将平台工具捣鼓出来了。 在里面也体验了express, socket.io, grunt等node插件服务,使用很流畅,并且很好的完了我的基本需求(JS\CSS\IMAGE的压缩和自动部署功能)。

虽然基本功能完成,但是还有一个让人容易忽略而又重要的问题来了,就是资源文件的版本号的问题。在这里用的是SeaJS来做的模块管理,也在网上搜集了一下关于这块的资料。大致有以下两种方案:

       1、 配置SeaJS的map对象。很方便,集中管理,但是也存在一些问题,比如:map对象的维护、配置文件引用页面的时间戳问题。
       2、 生成文件sign,替换原有文件的名。这里不用考虑页面引用的时间戳问题,但是需要对资源及页面做一次全文查找替换,这对于分散部署的情况下将会非常复杂。

       看了上面两种方案后,感觉在我的场景下还存在一些不足之处。笔者想要的是不影响开发情况下,开发人员完全不用考虑文件被缓存问题,只需完成编码,提交到构建系统后,一键完成构建和部署。

确定好目标后,既然不想让开发同学关心时间戳问题,那么是否可以将这个工作交给Web服务器来做呢?那么交给服务器来做之后,如何动态的更新最新的资源文件呢?

      有问题就好解决,将问题抛出来之后,方案也渐进呈现出来,不啰嗦了,直接上笔者的实现方案:

构建工具动态生成.htaccess文件,将构建的资源文件的URL重写列表同步到.htaccess文件中以达到由服务器动态获取新的资源文件。

(备注:笔者是在apache环境下,对IIS\NGINX\TOMCAT\RESIN\JBOSS等环境还需要再研究研究。)

      看了上面的方案是不是很简单,那具体是怎么做的呢?笔者也在这里列一下。

      1. 构建工具在构的时候生成一个与filename.ext对应的filename.ext.sha1的文件,这个.sha1的文件存放filename.ext文件的sha1值。

      2. 在构建完成后,构建工具读取.htaccess的模板,并且遍历得到所有资源文件的列表,生成一个对filename.ext对应的filename.ext.sign的文件。

      3. 按规则生成RewriteCond和RewriteRule。并将规则数据写到.htaccess文件中并部署到资源文件站点的根据目录。

Web前端开发 前端开发工具 NodeJS

图一:构建工具基本结构图

Web前端开发 前端开发工具 NodeJS

图二:构建后的文件列表

Web前端开发 前端开发工具 NodeJS

图三:生成一条Rule

Web前端开发 前端开发工具 NodeJS

图四:生成后的.htaccess文件

Tags:
本类文章
对Web前端构建工具版本号管理方案出台的思考!
DudaMobile:一键生成手机版网页
关于微信营销的几个见解及究探
国际域名实名制认证通知
网站空间租用大小有什么影响
相关内容
新闻资讯
公司动态
最新签约
网站建设FAQ
网络营销方法
网络业界资讯
网站建设技术
解决方案

最新案例

解决方案

建站套餐

最新资讯
对Web前端构建工具版本号管理方案出台
DudaMobile:一键生成手机版网页
关于微信营销的几个见解及究探
国际域名实名制认证通知
网站空间租用大小有什么影响