为了防止客户端的静态资源缓存，我们需要每次更新css或js的时候，通过md5或时间戳等方式重新命名静态资源；
然后涉及到的html模板里的src也要做相应的修改，静态资源需要优化(压缩合并)
文件目录结构

html模板文件
<html>

<head>

    <!-- build:css styles/main.min.css -->

    <link rel="stylesheet" href="../styles/one.css">

    <link rel="stylesheet" href="../styles/two.css">

    <!-- endbuild -->

</head>

<body>

    <!-- build:js scripts/main.min.js -->

    <script type="text/javascript" src="../scripts/one.js"></script>

    <script type="text/javascript" src="../scripts/two.js"></script>

    <!-- endbuild -->

</body>

</html>
gulp配置文件:gulpfile.js
var gulp = require('gulp'),

    minifyCss = require('gulp-minify-css'),

    jshint = require('gulp-jshint'),

    uglify = require('gulp-uglify'),

    clean = require('gulp-clean'),

    rev = require('gulp-rev'),

    concat = require('gulp-concat'),

    revReplace = require('gulp-rev-replace'),

    useref = require('gulp-useref'),

    revReplace = require('gulp-rev-replace'),

    revCollector = require('gulp-rev-collector');

//清空文件夹，避免资源冗余

gulp.task('clean',function(){

    return gulp.src('dist',{read:false}).pipe(clean());

});

//css文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出来

gulp.task('css',function(){

    return gulp.src('app/styles/*.css')

    //.pipe( concat('wap.min.css') )

    .pipe(minifyCss())

    .pipe(rev())

    .pipe(gulp.dest('dist/app/styles/'))

    .pipe(rev.manifest())

    .pipe(gulp.dest('dist/rev/css'))

});

//js文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出

gulp.task('js',function(){

    return gulp.src('app/scripts/*.js')

    //.pipe( concat('wap.min.js') )

    .pipe(jshint())

    .pipe(uglify())

    .pipe(rev())

    .pipe(gulp.dest('dist/app/scripts/'))

    .pipe(rev.manifest())

    .pipe(gulp.dest('dist/rev/js'))

});

//通过hash来精确定位到html模板中需要更改的部分,然后将修改成功的文件生成到指定目录

gulp.task('rev',function(){

    return gulp.src(['dist/rev/**/*.json','app/pages/*.html'])

    .pipe( revCollector() )

    .pipe(gulp.dest('dist/app/pages/'));

});

//合并html页面内引用的静态资源文件

gulp.task('html', function () {

    return gulp.src('dist/app/pages/*.html')

    .pipe(useref())

    .pipe(rev())

    .pipe(revReplace())

    .pipe(gulp.dest('dist/html/'));

})

　　

task执行顺序

构建后的目录结构

构建后的html模板文件
<html>

<head>

    <!-- build:css styles/main.min.css -->

    <link rel="stylesheet" href="../styles/one-970d7f6a33.css">

    <link rel="stylesheet" href="../styles/two-045a666e4a.css">

    <!-- endbuild -->

</head>

<body>

    <!-- build:js scripts/main.min.js -->

    <script type="text/javascript" src="../scripts/one-d89f951793.js"></script>

    <script type="text/javascript" src="../scripts/two-42f73556d2.js"></script>

    <!-- endbuild -->

</body>

</html>
如果需要对页面内引用的资源文件进行合并，这时我们可以利用:gulp-useref ,以及gulp-rev-replace 这两个构建工具的功能特性,然后执行gulp html 即可将index.html中引用的静态资源文件进行合并

执行gulp html之后的目录结构：

此时，构建后的html模板文件

<html>

<head>

    <link rel="stylesheet" href="styles/main-8056000222.min.css">

</head>

<body>

    <script src="scripts/main-d803fde67b.min.js"></script>

</body>

</html>

　　

Gulp:静态资源(css,js)版本控制的更多相关文章

  1. springboot拦截器拦了静态资源css,js,png,jpeg,svg等等静态资源

    1.在SpringBoot中自己写的拦截器,居然把静态资源也拦截了,导致了页面加载失败. package com.bie.config; import com.bie.component.MyLoca ...

  2. YII2-按需加载并管理静态资源(CSS,JS)

    参考博客: https://segmentfault.com/a/1190000003742452#articleHeader5

  3. Spring-Boot整合freemarker引入静态资源css、js等

    一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/mai ...

  4. Spring-Boot整合freemarker引入静态资源css、js等（转）

    一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/mai ...

  5. 【转载】IIS7.5（经典模式）访问静态资源(.css和.js文件）提示：未能执行 URL

    IIS7.5(经典模式)静态资源(.css和.js文件)提示:未能执行 URL “/”应用程序中的服务器错误. 未能执行 URL. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪 ...

  6. 关于WEB-INF目录下的静态资源（js、css、img）的访问

    首先,需要明确的是WEB-INF目录是被保护起来的,其下的jsp页面不能直接运行,只能通过控制器跳转来访问:而同样在此目录下的静态资源(js.css.img)也不能被WEB-INF目录外的其他文件直接 ...

  7. Django 模板中引用静态资源（js,css等）

    Django 模板中免不了要用到一些js和CSS文件,查了很多网页,被弄得略晕乎,还是官网靠谱,给个链接大家可以自己看英文的. https://docs.djangoproject.com/en/1. ...

  8. html 如何访问 jar 包里面的静态资源（js、css、字体等）

    前言:最近两天在尝试写一个工具 jar 包,里面包含后台处理的 java 代码,包含前端 html.js.css.字体文件等,过程中解决了访问 jar 包里的静态资源问题,所以记录下来. 附:自己的一 ...

  9. 静态资源（JS/CSS）存储在localStorage

    一.简单了解SEO SEO由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”.SEO是指从自然搜索结果获得网站流量的技术和过程. 搜索引擎不优化的网站分为 ...

随机推荐

  1. 2008年NOI全国竞赛 假面舞会

    /* 分三种情况 1 有环:找环长的gcd作为max gcd的超过2的最小因子作为min 2 树:所有最长链的和作为max 3为min (最长链≥3) 3 两条相交链:找出所有的这样的两条链的差 同1 ...

  2. mongodb查询之模糊查询

    mongodb的模糊查询是用正则表达式来实现的.例子如下: db.COMMODITY_COMMODITY_SHOP.find({name:{$regex :/南京/i}})

  3. mongodb创建副本集命令

    mongodb创建副本集命令 ./mongod --replSet spock --dbpath ../data --smallfiles > config ={... "_id&qu ...

  4. （转）关于c#中的事件

    原文链接http://blog.csdn.net/joyhen/article/details/8500211 如有不明白的地方欢迎加QQ群14670545 探讨 最近在看委托,然后看到事件,以前一直 ...

  5. Android 软件盘 动态设置 layout

    总体来说分为三种方法: 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: ...

  6. Linux && vim 批量替换

    Linux批量文件的字符串替换 sed -i "s/oldstring/newstring/g" `grep oldstring -rl path` vim多行替换::1,2s/s ...

  7. Property type 'id<tabBarDelegate>' is incompatible with type 'id<UITabBarDelegate> _Nullable' inherited from 'UITabBar'

    iOS报错:Property type 'id' is incompatible with type 'id _Nullable' inherited from 'UITabBar' 如图: 可能原因 ...

  8. Android自定义扁平化对话框

    平时我们开发的大多数的Android.iOS的APP,它们的风格都是拟物化设计.如今Android 4.X.iOS 7.WP8采用的是扁平化设计,可以看出扁平化设计是未来UI设计的趋势.其实扁平化设计 ...

  9. 晓说智能指针shared_ptr为何可以实现跨模块分配和释放内存

    最近做项目, 有个地方是外包人员写的, 其中有个函数,大致这样 void getInfo(std::shared_ptr<Info>& outInfo); 这个函数是一个dll(链 ...

  10. Java集合类笔试题

    介绍Collection框架的结构 Collection接口是单值存放的最大父接口,可以向其中保存多个单值的数据(所谓单值就是指集合中的每个元素都是一个对象).其子接口主要有:List.Set.Que ...