为了防止客户端的静态资源缓存，我们需要每次更新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. C# SqlHelper

    操作数据库时,经常会把常用的方法封装到一个类中,这里简单写了一个SQLHelper类,供我平时调用. public static class SqlHelper { private static re ...

  2. 面试题 HashMap 原理

    HashMap与HashTable的区别 总结: HashMap是用来代替HashTable的类,一般建议使用HashMap.最核心的区别:HashTable的方法是同步的(线程安全),而HashMa ...

  3. 补间动画 Interpolator 简介 示例

    简介 补间动画的原理: 每次绘制视图时View所在的[ViewGroup]中的drawChild函数获取该View的Animation的值,然后调用canvas.concat (transformTo ...

  4. 必须声明标量变量 "@列名"

    这个主要是因为变量没有赋上值(见下图)

  5. php的一些基本概念梳理

    楼主是个刚参加工作的菜鸟,这几天刚开通博客园微博,想通过这个平台与大家共同学习与分享一些技术知识. 但是楼主犹豫的好久,不知道第一篇该写点什么.最后我决定先从php的一些基本概念开始,以便加深对各个概 ...

  6. java反射新的应用

    利用java反射动态修改运行中对象的私有final变量,不管有没有get方法获取这个私有final变量. spring aop 本质是cglib,动态代理 可以做很多事情 query.addCrite ...

  7. Linux中 pid_t 类型的定义.

    说明:涉及到的头文件(.h),目录默认都是基于 /usr/include/ 目录. 1.在 "/sys/types.h"中,有下列内容: #include <bits/typ ...

  8. Linux 所有命令都用不了，只有cd exit能用

    原因: 在设置 java环境变量时,编辑profile文件没有写正确,导致在命令行下 ls等命令不能够识别.在命令行下打入下面这段就可以了export PATH=/usr/local/sbin:/us ...

  9. 动态IP无法获取默认网关，显示0.0.0.0的解决办法

    IP地址使用自动获取IP方式,可以获取到IP地址和子网掩码,默认网关无法获取,显示0.0.0.0,通过修复Winsock和LSP可以解决该问题,具体步骤如下:一.修复winsock1.单击开始> ...

  10. Jq/Js收集

    判断checkbox选中的个数1.$('#del').click(function(){ var length = $("input[name='checkItem']:checked&qu ...