为了防止客户端的静态资源缓存，我们需要每次更新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. Linux UDP严重丢包问题的解决

    测试系统在Linux上的性能发现丢包率极为严重,发210000条数据,丢包达110000之巨,丢包率超过50%.同等情形下Windows上测试,仅丢几条数据.形势严峻,必须解决.考虑可能是因为协议栈B ...

  2. UI中的七种手势

    // // GestureRecognizerViewController.m #import "GestureRecognizerViewController.h" #impor ...

  3. Spring静态属性注入

    今天遇到一个工具类,需要静态注入一个属性,方法如下: 第一步:属性的set和get方法不要加static package cn.com.chinalife.ebusiness.common.util; ...

  4. Mysql 5.6 Cmake 编译安装

    MySQL编译安装 环境: OS: CentOS 6.6x64 mini mysql: mysql-5.6.251. mysql 下载: http://dev.mysql.com/downloads/ ...

  5. js中运算符的优先级

    不确定下面表达式的运算顺序? a>b?c:d+e a&&b==c 看看下表就清楚了,下表按优先级从最高到最低的列出,具有相同优先级按从左至右的顺序求值. 运算符 描述 . [] ...

  6. memcache memcached 区别

    .目前大多数php环境里使用的都是不带d的memcache版本,这个版本出的比较早,是一个原生版本,完全在php框架内开发的.与之对应的带d的memcached是建立在libmemcached的基础上 ...

  7. Python自动化运维之7、生成器、迭代器、列表解析、迭代器表达式

    迭代器和生成器 1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外 ...

  8. 复杂事件处理引擎—Esper参考（事件部分）

    声明:Esper官方未提供中文文档,以后更新的大部分内容,均来自官方文档.本人英语小白一枚,翻译内容仅供参考.有些翻译确实不忍直视,君可略过. (有人可能会说,翻译的不好不如不翻,可能会误人子弟:不过 ...

  9. 利用FbinstTool+大白菜u盘工具，制作多系统启动U盘【转】

    一般制作多系统启动盘的教程都会要用到rub4dos+grubinst+ultraiso+msgdiyerl等等工具,一大串的工具列表让人望而生畏.其实大白菜里已经对这些工具做了非常好的封装,利用大白菜 ...

  10. 『电脑技巧』浅谈Win7的文件共享设置

    随着移动存储设备的普及,很少有小伙伴喜欢使用局域网“文件共享”这一捷径了 而且自从XP之后,Windows系列主机共享设置貌似比较麻烦 虽然事实并不是看上去那样(Win7也很Easy的说 = =) 现 ...