gulp教程之gulp-rev-append

Ooo_My_God发表于 分类:构建工具 阅读(12498) 评论(40)

简介:

使用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生成,因此文件未发生改变,此版本号将不会变)

4、配置gulpfile.js

4.1、基本使用(给页面引用url添加版本号,以清除页面缓存)

5、执行任务

5.1、命令提示符执行:gulp testRev

6、结束语

6.1、本文有任何错误,或有任何疑问,欢迎留言说明。

下载附件

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/49

相关推荐

评论

网友最新评论 (40)

  1. 执行成功后,页面没有发生任何变化

    Alvin 06-02 17:26 回复
  2. 找到执行后无效果的原因了,文件路径要用相对路径

    Alvin 06-02 17:32 回复
  3. 安装不了这个插件提示:
    npm WARN package.json gulp-rev-append@1.0.0 No repository field.
    npm WARN package.json gulp-rev-append@1.0.0 No README data
    npm WARN install Refusing to install gulp-rev-append as a dependency of itself

    Simon 06-14 17:26 回复
  4. 我执行后也没有任何变化,起码这是个应该容易出问题的地方

    高尔础 07-12 19:08 回复
  5. 问题已经解决,还是没有仔细,需要在html 引入请求链接处添加 中添加 ?rev=@@hash,再次编译时出现 http://***/dist/css/main.css?rev=0725474c31c5f1377aadaed5b1e5723b

    高尔础 07-13 18:55 回复
  6. 博主,请问这个插件和 “gulp-rev”+”gulp-rev-collector”的组合那个更好一点呢?

    青衿 07-28 14:00 回复
  7. 博主,请教个问题。requireJs配置里的引用缓存怎么处理呢?比如 var require = { baseUrl : ‘/src/’, //相对于定义了data-main的HTML paths: { ‘jq’ : ‘js/lib/jquery-1.11.1.min’, ‘cal’: ‘js/base/cal’ }};比如我更改了base/cal.js,这里的引用怎么处理

    夏秋 09-12 18:07 回复
  8. […] gulp教程之gulp-htmlmin gulp教程之gulp-imagemin gulp教程之gulp-minify-css gulp教程之gulp-rev-append gulp教程之gulp-autoprefixer […]

  9. 博主,写一个关于 gulp-rev-all 的例子吧。

    用户2898726502 11-11 17:57 回复
    • 你好,其实每个插件官方文档都非常详细啦,学会自学才是王道呀,点这里看看吧。https://www.npmjs.com/package/gulp-rev-all

      Ooo_My_God 11-17 15:50
    • 你好,其实每个插件官方文档都非常详细啦,学会自学才是王道呀,点这里看看吧。https://www.npmjs.com/package/gulp-rev-all

      YDCSS 11-17 15:52
    • 你好,其实每个插件官方文档都非常详细啦,学会自学才是王道呀,点这里看看吧。https://www.npmjs.com/package/gulp-rev-all

      YDCSS 11-17 15:52
    • 你好,其实每个插件官方文档都非常详细啦,学会自学才是王道呀,点这里看看吧。https://www.npmjs.com/package/gulp-rev-all

      YDCSS 11-17 15:52
    • 你好,其实每个插件官方文档都非常详细啦,学会自学才是王道呀,点这里看看吧。https://www.npmjs.com/package/gulp-rev-all

      YDCSS 11-17 15:52
    • 你好,其实每个插件官方文档都非常详细啦,学会自学才是王道呀,点这里看看吧。https://www.npmjs.com/package/gulp-rev-all

      YDCSS 11-17 15:52
    • 你好,其实每个插件官方文档都非常详细啦,学会自学才是王道呀,点这里看看吧。https://www.npmjs.com/package/gulp-rev-all

      YDCSS 11-17 15:52
  10. 博主,难道每个资源都要手动添加 ‘?rev=@@hash’ 么?

    饼干 12-28 16:01 回复
    • 是的,在需要防止缓存的静态资源手动加上标识。

      YDCSS 12-28 23:12
    • 是的,在需要防止缓存的静态资源手动加上标识。

      YDCSS 12-28 23:12
输入关键字