gulp配置版本号 教程之gulp-rev-append
简介：
使用gulp-rev-append给页面的引用添加版本号，清除页面引用缓存。
1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件
1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程
1.2、本示例目录结构如下：
2、本地安装gulp-rev-append
2.1、github：https://github.com/bustardcelly/gulp-rev-append
2.2、安装：命令提示符执行 cnpm install gulp-rev-append --save-dev
2.3、注意：没有安装cnpm请使用 npm install gulp-rev-append --save-dev 什么是cnpm，如何安装？
2.4、说明：--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json？
2.5、效果如下：
3、配置html页面引用
3.1、gulp-rev-append 插件将通过正则(?:href|src)=”(.*)[?]rev=(.*)[“]查找并给指定链接填加版本号（默认根据文件MD5生成，因此文件未发生改变，此版本号将不会变）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css?rev=@@hash">
<script src="js/js-one.js?rev=@@hash"></script>
<script src="js/js-two.js"></script>
</head>
<body>
<div>hello, world!</div>
<img src="img/test.jpg?rev=@@hash" alt="" />
<script src="js/js-three.js?rev=@@hash"></script>
</body>
</html>
|
4、配置gulpfile.js
4.1、基本使用（给页面引用url添加版本号，以清除页面缓存）
|
1
2
3
4
5
6
7
8
|
var gulp = require('gulp'),
rev = require('gulp-rev-append');
gulp.task('testRev', function () {
gulp.src('src/html/index.html')
.pipe(rev())
.pipe(gulp.dest('dist/html'));
});
|
5、执行任务
5.1、命令提示符执行：gulp testRev
6、结束语
6.1、本文有任何错误，或有任何疑问，欢迎留言说明。
本文转载自：http://www.ydcss.com/archives/49
gulp配置版本号 教程之gulp-rev-append的更多相关文章
- gulp教程之gulp中文API
1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入 ...
- gulp配置
/* gulp配置 */ /* gulp配置 */ var gulp = require('gulp'), concat = require('gulp-concat'), rename = requ ...
- 学习安装并配置前端自动化工具Gulp
Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...
- 使用gulp添加版本号
由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号. 常见的用法是使用gulp-rev和gulp-rev-collector进行操作.使用这两个插件,得到的效果如下图所示: ...
- Scss开发临时学习过程||webpack、npm、gulp配置
SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...
- win上gulp配置
主线: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1,安装node.js 1.1.说明 ...
- 安装并配置前端自动化工具-gulp
由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得 ...
- gulp配置文件备份
/** * Created by leyi on 2016/8/25 0025. */ /*********************package.json依赖模块****************** ...
- gulp 配置前端项目打包
项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问. gulpjs.com中有很多插件可以用来配置打包部署. 需要用的常用插件有: gulp-jsmin 压缩j ...
随机推荐
- 我们为什么要遵循W3C标准规范
大部分的站长和拥有网站的企业负责人都会知道,每当有浏览器发布大更新的时候,我们刚建立不久的网站就会发生无法预知的严重错误,我们只能重新建立或改版网站,使其可以应归新发布的浏览器.好比1996-1999 ...
- G - Reduced ID Numbers（第二季水）
Description T. Chur teaches various groups of students at university U. Every U-student has a unique ...
- CATCell <——>CATPoint
假定原先有CATCell tCell; CATVertex_var spVertex = tCell; CATPoint_var spPoint = spVertex -> GetPoint() ...
- 获取mssqlserver与access数据库插入的当前行的id
//mssqlserver public static int GetInsertId(string sql) { try { SqlCommand cmd = new SqlCommand(); u ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- MySQL应用层传输协议分析
001.在MySQL应用层传输协议中主要有如下三种类型的数据: 01.整数类型. 02.字符串类型. 03.描述数据包. 002.MySQL应用层传输协议中对整型的说明: 01.固定长度的整型---- ...
- 厂商自定义USB设备类概述
USB协会将常用具有相同/相似功能的设备归为一类,并制定了相关的设备类规范,这样就能保障只要依照同样的规范标准,即使不同的厂商开发的USB设备也可以使用同样的驱动程序,而且操作系统中无须为每种设备提供 ...
- Response JSON数据返回
简述: 在servlet填充Response的时候,做JSON格式的数据转换 使用的类是net.sf.json.JSONObject,传入response对象和返回的显示类,修改response,返回 ...
- 77个常用Linux命令和工具
77个常用Linux命令和工具 Linux管理员不能单靠GUI图形界面吃饭.这就是我们编辑这篇最实用Linux命令手册的原因.这个指南是特别为Linux管理员和系统管理员 设计的,汇集了最有用的一些工 ...
- (译)linux系统关于命令echo的15个例子
15 Practical Examples of ‘echo’ command in Linux By Avishek Kumar Under: Linux Commands On: August 2 ...