gulp 静态资源版本控制

1:安装nodejs2:npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev
npm install --save-dev run-sequence
3:在项目根目录下创建gulpfile.js(配置如下)  
gulpfile.js 配置

//引入gulp和gulp插件
var gulp = require(‘gulp‘),
    rev = require(‘gulp-rev‘),
    revFormat=require(‘gulp-rev-format‘),
    revCollector = require(‘gulp-rev-collector‘)

var assets=[
            ‘tabpBiz/resources/**/*.css‘,
            ‘tabpBiz/resources/**/*.js‘,
            ‘tabpBiz/resources/**/*.{png,PNG,jpg,JPG,Jpeg}‘
           ]

// 生成版本号清单
gulp.task(‘rev‘, function (){
  gulp.src(assets)
    .pipe(rev())
    .pipe(revFormat({
      prefix: ‘.‘, // 在版本号前增加字符
      lastExt: false
    }))
    .pipe(rev.manifest())
    .pipe(gulp.dest("rev/json"));
}); 

gulp.task(‘add-version‘,[‘rev‘], function() {
    gulp.src(["rev/json/*.json",‘tabpBiz/WEB-INF/ftl/**/*.ftl‘])
      .pipe(revCollector({replaceReved:true}))
      .pipe(gulp.dest(‘tabpBiz/WEB-INF/ftl‘));
}); 

gulp.task(‘default‘, [‘add-version‘]);

4:在项目根目录下创建package.json(配置如下)  
package.json 配置(无需更改,执行npm安装插件devDependencies会自动添加)
{
  "name": "test",
  "version": "1.0.0",
  "devDependencies": {
  }
}

5:修改
node_modules\gulp-rev-collector/index.js文件
一、
/*if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), ‘‘ ) !==  path.basename(key) ) {
          isRev = 0;
  }*/

  if ( !_.isString(json[key]) || path.basename(json[key]).split(‘?‘)[0] !== path.basename(key) ) {
          isRev = 0;
  }

二、
//return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
	//禁止重复添加版本号
    var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
    rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
    return rp;

三、
/*patterns.push( escPathPattern( (path.dirname(key) === ‘.‘ ? ‘‘ : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                            + opts.revSuffix
                            + escPathPattern( path.extname(key) )
                        );*/

 patterns.push( escPathPattern( (path.dirname(key) === ‘.‘ ? ‘‘ : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                            + opts.revSuffix
                            + escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
                        );
 6 打开node_modules\gulp-rev\index.js
/*manifest[originalFile] = revisionedFile;*/
manifest[originalFile] = originalFile + ‘?v=‘ + file.revHash;


 


  

ode

时间: 2024-10-11 05:33:30

gulp 静态资源版本控制的相关文章

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

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

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

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

spring mvc 静态资源版本控制

spring bean 文件中增加 <bean class="cn.zno.smse.common.context.VersionServletContext"></bean> 类文件 package cn.zno.smse.common.context; import java.util.Date; import javax.servlet.ServletContext; import org.springframework.web.context.Servl

gulp之静态资源的版本控制

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

gulp管理静态资源缓存

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

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

gulp教程之静态资源压缩

1 创建项目 安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件,项目目录如下: 2 压缩插件简介 gulp-useref 合并html里面的js/css gulp-concat用于合并文件,把也就是多个文件合并到一个文件中,以节省存储空间 gulp.spritesmith 图片合并成雪碧图 3 本地安装插件 安装gulp-useref npm install gulp-useref --save-dev 安装gulp-concat n

zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】

前言: 在我前面的博客,angular项目总结——angular + browserify + gulp + bower + less 架构分享  把我开发angular的架构进行了分享,并上传到了github https://github.com/zimv/zmNgFrameWork . 而后我又在我的 gulp系列 里分享了 gulp-rev:项目部署缓存解决方案----gulp系列(六) ,也更新了github上gulpStart的rev分支 https://github.com/zimv

spring boot 静态资源。。

spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. 建议大家使用Spring Boot的默认配置方式,如果需要特殊处理的再通过配置进行修改. 如果想要自己完全控制WebMVC,就需要在@Configuration注解的配置类上增加@EnableWebMvc(@SpringBootApplication 注解的程序入口类已经包含@Configuration),增加该注解以后WebMvcAutoConfiguration中配