【前端静态资源版本更新与缓存之——gulp自动化添加版本号】的更多相关文章

前端静态资源版本更新与缓存之——gulp自动化添加版本号

公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1.生成一个新的dist目录,里面包含了要发布的html,js,css等文件 . 2.在原来的HTML文件上进行js ,css版本的替换,不需要生成新的目录文件. 通过两种方法的实践过程对比,决定使用第二种办法,所以这里介绍一下第二种方式的实现过程: 一. 1. 修改js和css文件 2. 通过对js…

前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名 方案 现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件.但是在实际的公司的项目中,会有情况不能生成新的HTML进行发布,需要在原来的HTML文件上进行js ,css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案.…

前端工程精粹（一）：静态资源版本更新与缓存（附精简js的工具）

转自:http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1/ 每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎14条性能优化原则,还有两本很经典的性能优化指导书:<高性能网站建设指南>.<高性能网站建设进阶指南>.经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来.这些性能优化原则大概是在7年前提出的…

gulp自动化添加版本号并修改为参数格式

问题: 当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的. 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名,这样加版本号的静态文件就不会存在缓存的问题了. 解决: 我的当前版本 "gulp-rev": "7.1.2", "gulp-rev-collector": "1.2.…

Gulp自动添加版本号(转载)

本文转载自: gulp自动添加版本号…

Nginx针对前端静态资源的缓存处理

当用户上报一个线上的bug后,开发者修改前端代码的bug上新后,用户反映问题依旧存在的问题...这种情况是不是曾经遇到过,这个问题跟浏览器的缓存机制有很大关系(强制缓存和协商缓存,这里我就不介绍具体的缓存机制了,网上资料一搜一大把,并且讲的很详细),这里我来说下我们是如何解决这个问题的... 最简单粗暴的办法就是禁止强制缓存,我们本地开发的时候经常打开chrome这个功能,启用方法如下,这样我们每次刷新页面都是最新的代码,浏览器不会缓存任何静态资源(不知道这么说是不是真的合理...) 当然这种方…

开发掉坑（二）前端静态资源 Uncaught SyntaxError: Unexpected token <

某天,有同学反馈后台管理系统出现静态资源无法加载的问题. 复现如下: 进入首页. 点击侧边栏某个子功能,静态资源可正常访问到. 等待10分钟左右,点击侧边栏其他子功能,无法访问到静态资源. 查看控制台,发现输出 Uncaught SyntaxError: Unexpected token < 一开始检查了一下是不是服务器上面没有这个静态资源文件,随机找了一台服(注意,从这里开始掉坑里了),发现文件是存在: 接着怀疑是静态文件因为某种原因,会不时变动文件名,但是测试了一下,半小时内文件未曾发生变动…

前端自动化工具gulp自动添加版本号

之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件…

gulp批量添加版本号

要实现的理想效果: "/css/style.css" => "/dist/css/style.css?v=1d87bebe""/js/script1.js" => "/dist/script1.js?v=61e0be79""cdn/image.gif" => "//cdn8.example.dot/img/image.gif?v=35c3af8134" 1.安装Gulp…

gulp 自动添加版本号

本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.exam…

Gulp自动添加版本号

推荐使用gulp-rev + gulp-rev-collector是比较方便的方法,结果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.example.dot/img/i…

gulp自动添加版本号过程中的一些要点记录

1.打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash; 2.打开node_modules\gulp-rev\nodemodules\rev-path\index.js 10行 return filename + '-' + hash + ext; 更新为:…

前后端分离+本地服务实时刷新+缓存管理+接口proxy+静态资源增量更新+各种性能优化+上线运维发布——gulp工作流搭建

技巧集:http://www.gulpjs.com.cn/docs/recipes/ 其实无非就是利用各种gulp插件.node脚本对项目文件做各种IO操作,只是备忘,需要的话,还是自己重新写最合适. 1. 一个justwork的多页应用工作流 毛病:如果需要task之间的同步依赖关系,那么上一个task function里面需要有return:各个task的依赖,应该用gulpSequence做拉平. var gulp = require('gulp'), sass = require('gu…

tomcat缓存静态资源深入

之前看过apach及nginx对于静态资源(含js,图片,css等)部分的缓存,用于加速并减轻后台实际web服务器的压力. 静态资源缓存是WEB服务器优化的一种手段,基本原理如下: 1.客户端浏览器请求服务器一个服务(该服务含有图片,js等静态资源),通常会对于每一个网页中的独立图片或js文件发送一个http请求 2.WEB服务器对于每个资源HTTP请求进行解析,并生成一个资源修改时间的唯一值(可以是etag或last_modified参数),放入服务器端map,key为资源url,value为…

Gulp:静态资源(css,js)版本控制

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录结构 html模板文件 <html> <head> <!-- build:css styles/main.min.css --> <link rel="stylesheet" href="../styles/one.css"&g…

gulp静态资源构建、压缩、版本号添加

公司移动端商城使用前后分离方案,前台nginx静态文件,js使用requirejs模式,使用gulp压缩添加版本号时发现问题, 问题1.在公共的js配置中,引用的路径是写死的,缓存会一直存在. 解决方案是添加 urlArgs 构建时用shell脚本替换 'ttversion'为一个随机数值,我用的是当前时间. 问题2.其他模块引用的是common,那common.js不变的话,缓存会一直存在. 解决方案:还是用shell脚本,首先更改common.js为common_随机数.js,再更改所有引用…

循序渐进nginx(二)：反向代理、负载均衡、缓存服务、静态资源访问

目录 反向代理 使用 1.创建代理目标服务端: 2.配置nginx反向代理目标服务端: 3.测试使用: 负载均衡 使用 1.准备服务端 2.修改nginx配置 3.测试 负载均衡策略 负载均衡的额外参数 缓存服务 代理缓存 语法介绍 使用例子 代理缓存补充: 浏览器缓存 测试 静态资源访问 前置知识章节: 1.介绍.安装.hello world.location匹配 2.反向代理.负载均衡.缓存服务.静态资源访问 3.日志管理.http限流.https配置,http_rewrite模块,第三方模…

利用 filter 机制 给 静态资源 url 加上时间戳，来防止js和css文件的缓存，利于开发调试

直接上代码: public class WeiXinFilter implements Filter{ private static Logger logger = LoggerFactory.getLogger(WeiXinFilter.class); public void init(FilterConfig fConfig) throws ServletException {} public void destroy() {} public void doFilter(ServletReq…

ASP.NET Core缓存静态资源

背景 缓存样式表,JavaScript或图像文件等静态资源可以提高您网站的性能.在客户端,总是从缓存中加载一个静态文件,这样可以减少对服务器的请求数量,从而减少获取页面及其资源的时间.在服务器端,由于它们的请求较少,服务器可以处理更多的客户端而无需升级硬件. 虽然缓存是一件好事,但您必须确保客户端始终运行最新版本的应用程序.当您部署下一个版本的网站时,您不希望客户端使用过时的缓存版本的文件. 方案: 为确保用户始终使用最新版本的文件,我们必须为每个文件版本提供一个唯一的URL.有很多策略: 使用…

SpringMVC的缓存对静态资源的影响 304 Not Modified

我们知道在springmvc的配置中,可以添加缓存,但是缓存到底对静态资源有什么影响? 测试 没有添加缓存 <mvc:resources mapping="/image/**" location="/WEB-INF/"/> 添加了缓存 <mvc:resources mapping="/image/**" location="/WEB-INF/" cache-period="2592000"…

使用 Express 实现一个简单的 SPA 静态资源服务器

背景 限制 SPA 应用已经成为主流,在项目开发阶段产品经理和后端开发同学经常要查看前端页面,下面就是我们团队常用的使用 express 搭建的 SPA 静态资源服务器方案. 为 SPA 应用添加入口(index.html)的 sendFile 当 SPA 应用开启 html5 mode 的情况下,指定 url 下(<base href="/">的情况为/)的全部请求都会访问入口文件(一般情况下是 index.html),然后 SPA 应用会根据 url 再去决定访问的实际…

SpringBoot 基于web应用开发(请求参数获取，静态资源，webjars)

SpringBoot 基于web应用开发 一.Lombok使用 1.导入依赖库 <dependency>    <groupId>org.projectlombok</groupId>    <artifactId>lombok</artifactId>    <version>1.18.6</version></dependency> 2.安装插件 3.在实体bean使用 @Data    相当于set,ge…

Spring MVC配置静态资源的正常访问

SpringMVC如果过滤器过滤范围配置了/或者/*,那么框架会过滤所有请求,包括自己写的请求和静态资源请求,这样静态资源就不能正常加载,包括js文件.css文件.图片资源访问的时候都会出现404页面,下面就来配置不过滤静态资源的方法 第一种方法是最原生的,因为开始Spring核心过滤器过滤的路径是项目下所有路径,这个时候要改成过滤指定后缀即可,比如*.do,*.html等后缀,这样自己编写controller的时候全部主动设置请求为特定后缀,这样静态资源和编写的请求就可以区分开了 第二种方法是…

springmvc访问静态资源的springmvc.xml配置

一. 问题及需求 由于Spring MVC的web.xml文件中关于DispatcherServlet拦截url的配置为"/",拦截了所有的请求,同时*.js,*.jpg等静态资源也被拦截了,导致运行时跳转后的页面无法加载图片资源,如下图所示. web.xml: <!-- 配置DispatcherServlet所要拦截的url --> <servlet-mapping> <servlet-name>springmvc</servlet-name…

spring项目加载不出来静态资源

方法1: 拦截器中增加针对静态资源不进行过滤(涉及spring-mvc.xml) <!-- 添加注解驱动 --> <mvc:annotation-driven/> <!-- 通过mvc:resources设置静态资源,这样servlet就会处理这些静态资源,而不通过控制器 设置不过滤内容,比如:css,js,img 等资源文件 location指的是本地的真是路径,mapping指的是映射到的虚拟路径. --> <mvc:resources mapping=&qu…

SpringBoot——Web开发（静态资源映射）

静态资源映射 SpringBoot对于SpringMVC的自动化配置都在WebMVCAutoConfiguration类中. 其中一个静态内部类WebMvcAutoConfigurationAdapter实现了WebMvcConfigurer接口.(361) WebMvcConfigurer接口中定义了addResourceHandlers处理静态资源的默认映射关系.(500) addResourceHandlers在WebMvcAutoConfigurationAdapter类中实现 publ…

[golang]Go内嵌静态资源go-bindata的安装及使用

使用 Go 开发应用的时候,有时会遇到需要读取静态资源的情况.比如开发 Web 应用,程序需要加载模板文件生成输出的 HTML.在程序部署的时候,除了发布应用可执行文件外,还需要发布依赖的静态资源文件.这给发布过程添加了一些麻烦.既然发布单独一个可执行文件是非常简单的操作,就有人会想办法把静态资源文件打包进 Go 的程序文件中.下面就来看一些解决方案: go-bindata go-bindata 是目前我的程序 pugo 在用的嵌入静态资源的工具.它可以把静态文件嵌入到一个 go 文件中,并提供…

使用gulp添加版本号

由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号. 常见的用法是使用gulp-rev和gulp-rev-collector进行操作.使用这两个插件,得到的效果如下图所示: 但是,我们希望的格式是这种: 有大神给出了解决办法,参见如下链接: Gulp自动添加版本号 此篇文章中的修改行数,会随着插件的更新而发生变化,大家可以搜索一下,基本上就是了. 可是随后又出现一个问题,如果重复执行添加版本号的操作,版本号会重复追加到链接后面: <link rel="styles…

gulp之静态资源防缓存处理

最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的喜好,选择工具.至于为什么选择Gulp,因为Grunt的gruntfile配置真的很头大好吗!简直看到头晕晕,但是还是有不少人喜欢这种方式的.然后FIS真心很强大,你所需要的,基本它都提供了,并且做得很好很简单,如果你急于马上使用可以赶紧去看看.而我为什么不用呢,感觉可能是因为,有点黑盒子?哈哈哈.…

gulp管理静态资源缓存

前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,size一栏是from cache,也就是直接使用了本地的资源,而没有向服务器请求.这样做的好处是提升页面渲染速度,坏处是当服务器的对应的文件发生变化时,浏览器却还是使用缓存,造成布局混乱的问题. 解决办法 一个比较原始的办法是在修改了文件之后,手动改变文件名称,然后再在html手动更新资源的path…