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 ...
随机推荐
- PHP学习笔记六【方法-递归】
<?php //递归 global $n;//定义全局变量 function abc($n) { if($n>2) { abc(--$n); } echo '$n='.$n.'<br ...
- noNamespaceSchemaLocation前添加xsi
在.Net中操作xml文档,给节点添加,xsi:noNamespaceSchemaLocation属性时,不可以使用 XmlElement eleRoot = doc.CreateElement(&q ...
- android的reference table的问题
写得android程序总是崩溃,感觉像是内存泄露,但是检查代码发现该释放的都释放了.最终无奈,删除了接口函数中的调用,只使用下面的测试代码. JNIEXPORT jboolean JNICALL Ja ...
- VB 基础语法以及教学视频
以下是我找到的几个视频和基础知识地址,我感觉比较不错的,现在分享给大家,你们都可以去借鉴以下 视频地址1:http://www.kcch.cn/excel2007_825.html 视频地址2:htt ...
- JSON入门之二：org.json的基本用法
java中用于解释json的主流工具有org.json.json-lib与gson,本文介绍org.json的应用. 官方文档: http://www.json.org/java/ http://de ...
- Redis与Scrapy
Redis与Scrapy Redis与Scrapy Redis is an open source, BSD licensed, advanced key-value cache and store. ...
- python-整理--使用IDE
如何使用python的IDE 安装好python3.4之后,默认有一个叫IDLE,就是目录lib/idlelib之下,是一个简单实用的工具. 在VS2013上安装一个插件就可以使用VS当IDE了.插件 ...
- Android的动画
一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...
- tornado.web.Application类配置及使用
Application configuration classtornado.web.Application(handlers=None, default_host='', transforms=No ...
- python操作csv-xls完善后的代码
#coding:utf-8 #导入相应模块 import csv,xlwt,sys,os,fnmatch,xlrd from xlutils.copy import copy #对xls文件中的绝对值 ...