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-autoprefixer<转>
简介: 使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀.使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀.[特别是开发移动端页面时,就能充分体现它的优势.例如兼容性不 ...
- gulp教程之gulp-less
简介: 使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息. 1.安装nodejs/全局安装gu ...
- gulp教程之gulp-htmlmin
简介: 使用gulp-htmlmin压缩html,可以压缩页面javascript.css,去除页面空格.注释,删除多余属性等操作. 1.安装nodejs/全局安装gulp/本地安装gulp/创建pa ...
- gulp教程之gulp-minify-css
简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致. ...
- gulp教程之gulp-imagemin
简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片) 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile ...
- gulp教程之gulp-uglify
简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1. ...
- gulp教程之gulp-livereload
简介: gulp-livereload拯救F5!当监听文件发生变化时,浏览器自动刷新页面.[事实上也不全是完全刷新,例如修改css的时候,不是整个页面刷新,而是将修改的样式植入浏览器,非常方便.]特别 ...
- gulp教程之gulp-concat
简介: 使用gulp-concat合并javascript文件,减少网络请求. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1. ...
随机推荐
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- TRUNCATE TABLE (Transact-SQL)
删除表中的所有行,而不记录单个行删除操作. TRUNCATE TABLE 与没有 WHERE 子句的 DELETE 语句类似:但是,TRUNCATE TABLE 速度更快,使用的系统资源和事务日志资源 ...
- TopCoder kawigiEdit插件配置
kawigiEdit插件可以提高 TopCoder编译,提交效率,可以管理保存每次SRM的代码. kawigiEdit下载地址:http://code.google.com/p/kawigiedit/ ...
- 磁盘IO
基本概念: 在数据库优化和存储规划过程中,总会提到IO的一些重要概念,在这里就详细记录一下,个人认为对这个概念的熟悉程度也决定了对数据库与存储优化的理解程度,以下这些概念并非权威文档,权威程度肯定就不 ...
- 遗传算法在JobShop中的应用研究（part 5：解码）
解码操作是整个遗传算法最重要的一步,在这步里面我们利用配置文件中的信息将染色体解码成一个有向无环图. 在介绍解码操作之前我们先来看一下配置文件,在part1绪论中我们已经介绍了一个车间调度问题的基本信 ...
- item布局里有button之类的子控件时，会截获焦点
需要以上问题时,网上查了很多,结果都是使用android:descendantFocusability属性,设为blocksDescendants就ok了,(具体不详叙述) 可是我给item的根布局设 ...
- 链表的C语言实现
#ifndef _CONST_H_#define _CONST_H_ #include <stdio.h>#include <stdlib.h> typedef enum { ...
- PHP 编译安装
1, 获取源码wget -O php.tar.gz http://am1.php.net/get/php-5.6.27.tar.gz/from/this/mirrortar zxvf php.tar. ...
- Linux系统下配置Tomcat
1.将下载好的tomcat文件拷贝至/usr/java文件夹中: cp apache-tomcat-7.0.72.tar.gz /usr/java 2.进入/usr/java文件夹: cd /usr/ ...
- MongoDB 概念解析
SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection 数据库表/集合 row document 数据记录行/文档 col ...