npm包simple-gulp-rev-collector使用教程

简介

simple-gulp-rev-collector是一款基于gulp的npm包,用于静态版本控制。它可以自动进行静态资源版本更新(如js、css、image等),并且能够自动替换html中的旧版本资源引用。

安装

全局安装 gulp:

--- ------- ---- --

在项目根目录下,使用 npm 安装 simple-gulp-rev 和 simple-gulp-rev-collector:

--- ------- -------- ------------------ ----------

代码示例

以下是使用例子,可以在gulpfile.js文件中添加如下代码:

--- ---- - ----------------
--- --- - --------------------
--- ------------ - ------------------------------

---------------- ---------- -
  -- ----------
  ----------------------------
    ------------
    ----------------------------
    ---------------------
    -----------------------

  -- ---------
  --------------------------
    ------------
    ---------------------------
    ---------------------
    -----------------------

  -- -------------- ------------
  ---------------------------
    -------------------------------
---

-- ------------
--------------------- ---------- -
  ----------------------- --------------- -- -------------------------------------
    --------------------
      ------------- -----
      ---------------- -
        --------- ------------
        -------- ----------
      -
    ---
    --------------------------
---

-- ---- ------
-------------------- ------- -------------

说明

在执行如上gulp任务后,会自动生成rev文件夹用于存储rev-manifest.json文件(版本递增记录),dist文件夹用于存储更新后的静态资源(js、css)等,以及对应HTML中的旧版本资源将会被自动替换为新版本。

simple-gulp-rev-collector可以让前端开发者不必根据版本号手动更改HTML代码中每个引入资源的地址,它能够自动将HTML中的静态资源替换为最新的版本号。

总结

本文简单介绍了simple-gulp-rev-collector,它是一款非常好用的npm包,能够帮助开发者完成静态资源版本更新和自动替换HTML中的旧版本资源。这对于大型项目来说非常实用,尤其当静态资源较多、复杂时使用该插件非常方便。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005668081e8991b448e29d3


猜你喜欢

  • npm 包 redux-network 使用教程

    简介 redux-network 是一款基于 Redux 的网络请求管理库,它可以帮助前端开发者更好地管理网络请求的过程,以提高应用程序的性能和用户体验。本文将介绍 redux-network 的基本...

    3 年前
  • npm 包 @sapien/core.layers 使用教程

    介绍 在前端开发中,使用 npm 包已经成为了日常必备的工具之一,而 @sapien/core.layers 正是一个优秀的 npm 包之一。它是如何协助我们完成前端开发工作的呢?本文将为您介绍如何使...

    3 年前
  • npm 包 ngx-platform-identifier 使用教程

    介绍 ngx-platform-identifier 是一个基于 Angular 的 npm 包,它提供了一种识别客户端和浏览器环境的方式。使用 ngx-platform-identifier,您可以...

    3 年前
  • Notable-editor-images: 前端编写文章工具包——使用教程

    随着前端开发的快速发展,现在越来越多的前端开发者开始涉及到文本内容的编辑,而 Notable-editor-images 就是为这个需求而开发出来的一个工具包。它可以帮助开发者方便地在文章编辑器中插入...

    3 年前
  • npm 包 ngx-truncate 使用教程

    在前端开发中,有时需要对文本内容进行截断处理,以达到更好的展示效果。ngx-truncate 是一个基于 Angular 的 npm 包,能够帮助开发者方便地对文本进行截断处理,支持多种截断方式和截断...

    3 年前
  • npm 包 cordova-plugin-alipush 使用教程

    阿里推送服务(Alibaba Cloud Push Service)是一款高效、可靠、安全、稳定的移动消息推送服务,可用于向 iOS、Android 和 Web 应用程序发送消息通知。

    3 年前
  • npm 包 draft-js-mathjax-plugin 使用教程

    前言 在前端开发中,有时需要在网页中插入数学公式,传统的方式是使用 LaTeX 语法,但是这需要一定的学习成本,并且不够直观,因此可以使用 MathJax 来解决这个问题。

    3 年前
  • npm 包 @cgjs/dgram 使用教程

    在前端开发中,网络通信是非常重要的一个环节。而在网络通信中,UDP 协议是一种高效而且实时性非常好的协议。@cgjs/dgram 是 npm 上一个比较好用的 UDP 封装库,可以帮助前端开发者轻松地...

    3 年前
  • npm 包 @cgjs/tty 使用教程

    在前端开发中,我们经常需要与终端进行交互,例如显示命令行提示信息,读取用户输入等等。Node.js 提供了一个标准的 tty 模块用于处理终端相关的操作,但它的 API 并不是很友好,使用起来比较繁琐...

    3 年前
  • NPM 包 @cgjs/url 使用教程

    @cgjs/url 是一个方便的 NPM 包,可帮助前端开发者更加高效地处理 URL。该包提供了一系列的工具函数,方便你进行 URL 相关的操作。 安装 在使用该包之前,你需要先安装它。

    3 年前
  • npm 包 coverage-badger 使用教程

    在前端开发过程中,测试覆盖率是一个非常重要的指标。它能够帮助我们发现代码中的漏洞和缺陷,并且有效地降低错误率。而 coverage-badger 这个 npm 包,就是专门用来帮助我们生成测试覆盖率徽...

    3 年前
  • npm 包 @cgjs/stream 使用教程

    通过 @cgjs/stream 这一 npm 包,我们可以在 Node.js 环境中对数据流进行操作,包括创建数据流、缓存、传输等等。这一模块的功能十分强大,能够很好地处理大量数据的情况,是前端开发的...

    3 年前
  • NPM 包 @antklim/api-to-cloud 使用教程

    随着云服务的普及,越来越多的前端开发人员开始使用云服务来搭建后端接口。但是云服务提供商的 API 细节往往复杂多变,很容易让开发人员感到困惑和疲惫。为了简化这一过程,@antklim 提供了一个名为 ...

    3 年前
  • 使用 npm 包 octicons-with-cafe

    在前端开发中,经常用到一些图标,以加强页面的表现力。然而,设计图标是一项很复杂的工作,需要专业的设计人员和软件;因此,开发社区中出现了大量的图标集合,以供前端开发者使用。

    3 年前
  • 使用 @withinpixels/ngx-dnd 实现前端拖拽功能教程

    随着 Web 应用程序体验的要求越来越高,拖拽功能已经成为了现代 Web 应用程序中所必须的一部分。而 @withinpixels/ngx-dnd 就是一款基于 Angular 的拖拽组件,它可以方便...

    3 年前
  • npm 包 parse-kv 使用教程

    在前端开发中,我们经常需要处理键值对的数据。在此背景下,NPM 包 parse-kv 能够为我们提供很好的帮助。本文将为大家介绍 npm 包 parse-kv 的使用方法,旨在帮助读者快速掌握该工具的...

    3 年前
  • npm 包 @cgjs/string_decoder 使用教程

    在前端开发中,我们常常要处理二进制数据,特别是处理从网络或本地读取的文件时。而字符串编码是区分数据的重要一环。在 JavaScript 中,我们可以使用 StringDecoder 模块来解决这个问题...

    3 年前
  • npm 包 @cgjs/tls 使用教程

    前言 在 Web 开发中,TLS(Transport Layer Security)在保证安全性方面扮演着重要角色。而在 npm 包中,@cgjs/tls 是一款提供了 TLS 连接的框架。

    3 年前
  • npm 包 discord.js-sharder 使用教程

    前言 Discord 是一个功能丰富、免费的语音和文本聊天软件,广泛应用于游戏和社群。而 discord.js-sharder 是一个 Node.js 使用的 Discord Bot 框架,它支持自动...

    3 年前
  • npm 包 camel-case-selector 使用教程

    介绍 camel-case-selector 是一款专门用于将横线分隔的选择器转换为驼峰式的选择器的 npm 包。它能够简化编写过程中对样式表中选择器的书写,使得选择器的名称更加简洁明了,提高了代码的...

    3 年前

相关推荐

    暂无文章