静态文件是前端开发的根本,和巧妇难为无米之炊一样。它是前端工作的成果载体。 静态文件一直以来是静态存在的,单独的css,js,img。这些都给维护带来了很大的不便。前端有时很讨厌那些静态的零碎的东西,他会引起很多问题。 例如: 1)时间戳:你修改了一个样式文件,涉及到的n多页面,都要把它引用时间戳改掉。如果漏了,发布后,不懂技术的同事就来说样式乱了,页面错位了,这时你只能说,清一下缓存吧。从我做前端开始到现在,每次发布都或多或少遇到这样的额问题。 2)管理零散的样式和脚本文件:前端将设计转化为工业化生产,于是我们就会做组建,做模块,这些零碎的静态资源再组合拼装成我们最终的页面。如何管理这些组建也是需要有个系统来控制,不然全靠手动就乱套了。
面对这种问题,yui产出了yui.loader,实现了在页面上方便快捷的调用组建。
在这第四届D2之前,我在项目中经常遇到发布时,改很多时间戳,组建过多不好管理的问题。于是想办法解决。 这个方法很快就想到了,没多复杂。最终靠着牛逼的韩强同学用python把这个实现了.部署到php环境的项目中,以后再也不用改一次静态文件,就改相关的时间戳了.发布变的轻松很多.能让机器做的事情.干嘛要手动来呢?
下面是这套东西的工作原理:
页面中涉及到的组件很多,比如有4个组件,这四个组件分类有它自己的js和样式,我们有个总控文件来配置这些该页面所有的组件。在本地这些文件是一个个独立引用的。到线上时,我们就从配置文件里把它们找出来打包成一个,再压缩。每次修改一个静态文件,比如样式,js等就自动将涉及到该组件的所有页面静态文件时间戳+1。
具体来说就是这样。
<source var=”address_up” src=”pub/add1.js” version=”1″ type=”js” name=”这是页面address_up.html用到的静态文件”> <one src=”js/1.js” version=”1″></one> <one src=”js/2.js” version=”1″></one> </source>
假设页面里我们用到了两个js文件,js/1.js和js/2.js,这里就是一些拆分的组建。引用时只需要写类似$address_up 就可以在页面中打出 <script src=”js/1.js”></script><script src=”js/2.js”></script> 而在线上环境,这两段js会被合并成一个压缩版的<script src=”pub/add1.js?version=1″></script> 我在本地更改一次js/1.js或js/2.js,打包后的pub/add1.js时间戳就会加1,变为pub/add1.js?verson=2。
这就是打包和自动时间戳的原理。后来参加d2,看见有人说也做了自动时间戳,不知道他们是怎么处理。
Your email is never published nor shared. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
静态文件打包和自动时间戳
静态文件是前端开发的根本,和巧妇难为无米之炊一样。它是前端工作的成果载体。
静态文件一直以来是静态存在的,单独的css,js,img。这些都给维护带来了很大的不便。前端有时很讨厌那些静态的零碎的东西,他会引起很多问题。
例如:
1)时间戳:你修改了一个样式文件,涉及到的n多页面,都要把它引用时间戳改掉。如果漏了,发布后,不懂技术的同事就来说样式乱了,页面错位了,这时你只能说,清一下缓存吧。从我做前端开始到现在,每次发布都或多或少遇到这样的额问题。
2)管理零散的样式和脚本文件:前端将设计转化为工业化生产,于是我们就会做组建,做模块,这些零碎的静态资源再组合拼装成我们最终的页面。如何管理这些组建也是需要有个系统来控制,不然全靠手动就乱套了。
面对这种问题,yui产出了yui.loader,实现了在页面上方便快捷的调用组建。
在这第四届D2之前,我在项目中经常遇到发布时,改很多时间戳,组建过多不好管理的问题。于是想办法解决。
这个方法很快就想到了,没多复杂。最终靠着牛逼的韩强同学用python把这个实现了.部署到php环境的项目中,以后再也不用改一次静态文件,就改相关的时间戳了.发布变的轻松很多.能让机器做的事情.干嘛要手动来呢?
下面是这套东西的工作原理:
页面中涉及到的组件很多,比如有4个组件,这四个组件分类有它自己的js和样式,我们有个总控文件来配置这些该页面所有的组件。在本地这些文件是一个个独立引用的。到线上时,我们就从配置文件里把它们找出来打包成一个,再压缩。每次修改一个静态文件,比如样式,js等就自动将涉及到该组件的所有页面静态文件时间戳+1。
具体来说就是这样。
<source var=”address_up” src=”pub/add1.js” version=”1″ type=”js” name=”这是页面address_up.html用到的静态文件”>
<one src=”js/1.js” version=”1″></one>
<one src=”js/2.js” version=”1″></one>
</source>
假设页面里我们用到了两个js文件,js/1.js和js/2.js,这里就是一些拆分的组建。引用时只需要写类似$address_up 就可以在页面中打出
<script src=”js/1.js”></script><script src=”js/2.js”></script>
而在线上环境,这两段js会被合并成一个压缩版的<script src=”pub/add1.js?version=1″></script>
我在本地更改一次js/1.js或js/2.js,打包后的pub/add1.js时间戳就会加1,变为pub/add1.js?verson=2。
这就是打包和自动时间戳的原理。后来参加d2,看见有人说也做了自动时间戳,不知道他们是怎么处理。