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. ...
随机推荐
- abrt-hook-ccpp: Saved core dump of pid 12224导致dn挂掉问题
一.引言: 最近发现datanode老是无缘无故的进程挂掉,从程序的日志没有stop迹象,只能从/var/log/messages入手,发现如下信息: 从namenode的页面也可以看到进程消息的时间 ...
- eclipse连hadoop2.x运行wordcount 转载
转载地址:http://my.oschina.net/cjun/blog/475576 一.新建java工程,并且导入hadoop相关jar包 此处可以直接创建mapreduce项目就可以,不用下面折 ...
- C# 调用存储过程操作 OUTPUT参数和Return返回值
本文转载:http://www.cnblogs.com/libingql/archive/2010/05/02/1726104.html 存储过程是存放在数据库服务器上的预先编译好的sql语句.使用存 ...
- zigbee学习之路(十一):看门狗
一.前言 今天,我们要通过实验学习和认识一下看门狗的使用,看门狗是为了防止防止程序跑飞的,通过不断的喂狗,使看门狗能持续监管程序的运行状态,当程序跑飞时,能及时把程序拽回来. 二.原理与分析 在CPU ...
- 【前端】require函数实现原理
// require函数实现原理: function require(modulePath) { var regExp = /\w+$/g; var moduleName = regExp.exec( ...
- rewrite规则中参数多于9个的处理方式 apache nginx
RewriteRule ^index-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)-([0-9]+)(.*)$ $9&a ...
- 客户端实现蓝牙接收(C#)
知识总结发布 (转载) 网上有关蓝牙接收的资料很多,使用起来也很简单,但是我觉得还是有必要把这些知识总结下来,蓝牙开发需要用到一个第三方的库InTheHand.Net.Personal.dll,感兴 ...
- jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
代码如下: setFocus=function(id){ var t=$("#"+id).val(); $("#"+id).val(""). ...
- arguments的理解
(function(){ return typeof arguments; })(); 无聊的时候看看网上的面试题.个人认为通过面试题可以对某个知识点能够更加认识,踩过坑才会明白坑是有多大.代码中经常 ...
- Javascript运用函数计算正方形的面积
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...