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

    1.Javascript是什么? JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中运行.JavaSript. Ja ...

  2. MYSQL预处理传参不区分大小写解决办法

    问题:预处理语句为:SELECT * FROM WHERE name=? 如果传送的参数为“admin” “ADmin” “ADMIN” “ADimn”等,结果处理后的语句为SELECT * FROM ...

  3. 使用AFNetworking时, 控制器点击返回销毁了, 但还是会执行请求成功或失败的block, 导致野指针异常

    原本我以为是我程序框架有问题...后来才知道, 无知真可怕... __unsafe_unretained __block typeof(self) weakSelf = self; AFHTTPSes ...

  4. apache_fileupload实现文件上传_上传多个文件

    1.导包 核心类: DiskFileItemFactory – 设置磁盘空间,保存临时文件.只是一个具类. ServletFileUpload  - 文件上传的核心类,此类接收request,并解析r ...

  5. Python自动化运维之5、内置函数

    python3.x内置函数 官网详解 一些例子:后期慢慢接触到再补充 # help() 详细查看某个类有那些方法或者方法的具体使用 >>> help(str) >>> ...

  6. 转：pthread_create()

    http://blog.csdn.net/youbang321/article/details/7815707 原型:int  pthread_create((pthread_t  *thread,  ...

  7. POJ 1987 Distance Statistics

    http://poj.org/problem?id=1987 题意:给一棵树,求树上有多少对节点满足距离<=K 思路:点分治,我们考虑把每个距离都存起来,然后排序,一遍扫描计算一下,注意还要减掉 ...

  8. Altium Designer 09 （Protel）总线使用方法（解决导入PCB无网络标号问题）

    弄了两天的Protel总线问题终于解决了,一开始顶层总线连接好后,导入PCB没有网络标号,也就是两个子图信号没连上.现在将正确的连接和设置方法公布如下: 1.首先画好子图的总线,如下图所示.注意:中括 ...

  9. Basefragment的封装使用

    1.前言 封装作为面向对象的三大特性之一,在我们平时的coding过程用的那是非常的多的.大多数时候,我们可以根据封装情况评判代码的质量水平. 本文主要讲解的是fragment的封装.大体上,在项目的 ...

  10. 【HDOJ】2577 How to Type

    DP. /* 2577 */ #include <cstdio> #include <cstring> #include <cstdlib> #define MAX ...