npm 包 broccoli-static-asset-rev 使用教程

简介

npm 包 broccoli-static-asset-rev 用于将网站中的静态资源进行 hash 处理,以解决浏览器缓存问题。

在网站中,静态资源如 CSS、JS 文件中更新后,用户的浏览器可能还是使用缓存中的老文件,导致网站出现问题。使用 broccoli-static-asset-rev 在构建过程中对静态资源进行 hash 处理,可以让浏览器发现文件已更新,强制更新缓存。

安装与使用

  1. 安装 broccoli-static-asset-rev npm 包:

    --- ------- ------------------------- ----------
  2. Brocfile.js 文件中引入 broccoli-static-asset-rev:

    ----- -------------- - -------------------------------------
  3. 构建管道中使用 staticAssetRev:

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

staticAssetRev(srcDir, options) 接收两个参数,分别是:

  • srcDir:源目录路径,可以是 broccoli 节点。
  • options:各种选项。

其中,options 中有以下重要的选项:

  • extensions:数组类型,用于指定需要处理的文件类型。
  • exclude:数组类型,用于指定需要排除的文件路径。

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


猜你喜欢

  • npm包example-apitest使用教程

    什么是example-apitest example-apitest是一个能够模拟API请求和响应的npm模块。该模块主要用于前端开发中的接口联调和测试工作,为前端开发人员提供了更加方便、快捷的测试方...

    2 年前
  • npm 包 hhurley 使用教程

    介绍 hhurley 是一个快速搭建前端项目的工具,可以帮助我们快速生成项目骨架、自动化构建、启动服务器等各种复杂的操作,同时集成了常用的前端工具,如 less、babel、eslint 等。

    2 年前
  • npm 包 l8r 使用教程

    什么是 l8r l8r 是一个npm包,用于为JavaScript中的任何异步操作提供一种延迟执行的功能。它可以使开发人员轻松地控制异步代码的执行顺序和时间。在本文中,我们将深入了解 l8r 的使用方...

    2 年前
  • npm 包 @geobase/countries-data 使用教程

    前言 在前端开发过程中,经常需要使用到国家信息数据,包括国家名称、简称、代码、电话区号等等信息。而 npm 包 @geobase/countries-data 就是一个专门收集整理了世界各个国家信息数...

    2 年前
  • NPM 包 Dropd 使用教程

    什么是 Dropd Dropd 是一个用于创建自定义下拉菜单的 JavaScript 库。它可以通过 npm 安装并集成到您的 Web 应用程序中。使用 Dropd 你可以轻松地创建带有自定义样式的,...

    2 年前
  • npm 包 fis3-deploy-checkup 使用教程

    介绍 fis3-deploy-checkup 是一个用于前端项目构建的 npm 包。它可以在每次构建时自动检查项目中的问题,如代码规范问题、安全性问题等,帮助你保证构建的代码质量和安全性。

    2 年前
  • npm 包 ionic2-tags-input 使用教程

    前言 随着移动端应用的普及,Web 前端越来越注重用户体验,而标签输入框是一个经常使用的组件。ionic2-tags-input 就是一个优秀的标签输入框组件,它基于 Ionic2 与 Angular...

    2 年前
  • npm 包 jq-query 使用教程

    简介 在前端开发中,有很多需要进行 DOM 操作的场景,例如选择元素、修改属性、添加/删除元素等。jQuery 是一个十分流行的库,提供了方便快捷的 DOM 操作方式。

    2 年前
  • npm 包 simple-pg 使用教程

    什么是 simple-pg simple-pg 是一个 Node.js 的 PostgreSQL 数据库连接库。它提供了类似于 Sequelize 的模型定义和查询 API,但比 Sequelize ...

    2 年前
  • NPM 包 react-native-blurryry 使用教程

    React Native 是一种用 JavaScript 和 React 构建原生 iOS 和 Android 应用程序的框架,react-native-blurryry 是一个用于将图像模糊化的 R...

    2 年前
  • npm 包 mocker-cookie-manager 使用教程

    在前端开发中,我们经常需要使用 cookie 来保存用户相关信息,但是测试过程中经常需要修改 cookie 的值,以测试不同的场景。这时,一个好用的 cookie 管理工具就显得尤为重要,mocker...

    2 年前
  • npm 包 react-slick-light 使用教程

    React-slick-light 是一个小巧的,基于 React 的轮播组件库。本文将介绍其基本用法,并演示如何在项目中使用。 安装 react-slick-light 可以通过 npm 安装: -...

    2 年前
  • npm 包 @deployable/timer 使用教程

    简介 @deployable/timer 是一个用于前端测速的 npm 包,可以帮助前端工程师快速测量网页的加载时间和运行时间。它基于 performance API,能够准确测量每个阶段的时间,并作...

    2 年前
  • npm 包 doc-indexer 使用教程

    前言 现今的前端开发越发依赖 npm,npm 包也愈加丰富。npm 包 doc-indexer 可以帮助用户扫描 npm 包中的文档,并构建一个索引。这样,在使用某个 npm 包时,用户就能很方便地查...

    2 年前
  • npm 包 angularjs-slider-zsk 使用教程

    介绍 angularjs-slider-zsk 是一个基于 AngularJS 的滑块组件。它易于使用,并可以自定义样式、设置初始值、控制步伐等功能。它可以帮助我们快速地构建出一个带有滑块控制功能的 ...

    2 年前
  • npm 包 grunt-terminal-browser 使用教程

    简介 在前端开发中,我们经常需要在命令行中执行一些操作,比如构建项目、打包代码、启动服务等等。而 grunt-terminal-browser 就是一个可以在浏览器端执行命令的 npm 包。

    2 年前
  • npm 包 react-native-ui-common 使用教程

    前言 React Native 是一款非常受欢迎的跨平台移动应用开发框架。使用 React Native,可以使用 JavaScript 编写高性能的原生应用程序。

    2 年前
  • npm 包 yymap-cli 使用教程

    简介 yymap-cli 是一个基于 Node.js 的 npm 包,用于生成优雅的 SVG 地图。该包提供了一系列的命令行接口,能够快速生成符合要求的 SVG 地图文件。

    2 年前
  • npm 包 angular2-header-library 使用教程

    简介 在前端开发中,经常需要使用到各种第三方库。其中一个非常常用的包管理工具是 npm,而其中一个重要的 package 是 Angular,这个框架提供了很多有用的组件和功能。

    2 年前
  • npm 包 babel-plugin-react-css-modules-theme 使用教程

    npm 包 babel-plugin-react-css-modules-theme 使用教程 在前端开发中,我们常常使用 CSS Modules 来进行模块化 CSS 的编写,以解决传统 CSS 的...

    2 年前

相关推荐

    暂无文章