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 ...
随机推荐
- sql 成绩表 case then
select * from dbo.tb_Scroe select Name,(select count(*) from tb_Scroe where Name = t.Name and Scroe ...
- OC——动态添加Button和监听UIAlertView按钮
1:动态添加uibutton - (IBAction)addButton:(id)sender { CGRect frame = CGRectMake(90, 200, 200, 60); UIBut ...
- 仅当使用了列的列表 并且 identity_insert 为 on 时 才能在表 中为标识列指定显式值
当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'products' 中的标识列插入显式值.” 示例: 1.首先建立一个有标识列的表:CREATE TABLE products (i ...
- Java的动态代理机制详解（转）
在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的 ...
- ZendStudio10 代码格式化 xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <profi ...
- XML新手入门 创建构造良好的XML(1)
XML新手入门 创建构造良好的XML(1) 2009-03-19 09:24 Kay Whatley IBM Developerworks 我要评论(0) 字号:T | T 本文描述了构建良好的XML ...
- 基于DateTime Picker修改成类似旅游网站出发日期选择的功能
原版说明文档:http://www.bootcss.com/p/bootstrap-datetimepicker/ 修改后可支持多日期选择和控制可选日期,这样就能在后台设置哪些日期可选,前台展示时可以 ...
- 初学swift笔记 继承（十）
import Foundation /* 继承 class childClass: FatherClass{ } 优点 代码重用 缺点 增加程序的藕合度 父类的改变会影响子类 只能单继承 */ cla ...
- Div+Css（一）必备知识
我只积累我不知道的 参考链接 http://www.kwstu.com/ArticleView/divcss_201442291125960 http://www.kwstu.com/ArticleV ...
- Oracle EBS-SQL (QA-1):检查超出检验周期的检验数据.sql
select msi.segment1 物料编码, msi.DESCRIPTION ...