为了防止客户端的静态资源缓存，我们需要每次更新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基础知识之 系统启动流程

    [1]Linux启动的几个主要阶段 启动流程示意图

  2. Mysql group_concat

    select p.id,p.parent_id,group_concat(distinct(CONCAT("分类名称:",c.name)) order by c.id desc s ...

  3. requirejs和r.js的心得

    requirejs的GitHub:requirejs r.js的GitHub:r.js grunt-contrib-requirejs的GitHub:grunt-contrib-requirejs r ...

  4. (转)jQuery LigerUI 插件介绍及使用之ligerTree

    一,简介  ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...

  5. 开启mysql慢查询日志并使用mysqldumpslow命令查看

    mysql服务器有一项功能,可以检测到哪条sql语句查询得比较慢,就是慢查询slowlog,现在介绍如何开启. 在[mysqld]下面增加如下代码: long_query_time = 1 log-s ...

  6. Android Studio Gradle 版本不同报错解决方法

    由于GFW的原因,我们在使用as时经常出现失败,或者第一次新建工程不成功. 很多博客上已经提到了如何解决第一次新建工程Gradle构建的问题,那么在打开别的工程时依旧会报错 "Failed ...

  7. 用MS自带的VS构建joint语句

    在其中一个表上,右键,选择"New Query",弹出"Add Table"对话框,将待joint的两个表Add,并选择相应字段,则会自动构建joint语句,其 ...

  8. DELL磁盘阵列控制卡（RAID卡）MegaCli常用管理命令汇总

    新版本的 MegaCli-1.01.24-0.i386.rpm (下载地址:http://www.lsi.com/downloads/Public/MegaRAID Common Files/8.02 ...

  9. iOS用心学 UI基础之UIView

    一.引入UI 在实际开发中,基本的流程大致如下图所示: UI(User Interface)作为最基本的要点,也是非常重要的一部分,UI界面的美观直接决定着着用户的体验,苹果官方给开发中提供了非常强大 ...

  10. Swift隐式可选型简单介绍

    /* 隐式可选型 */ // 隐式可选型同样可以赋值为nil, 而且在后面对这个变量的使用也可以不用进行解包 var value: String! = nil // print(value) 这行代码 ...