npm 包 laravel-elixir-rev-manifest 使用教程

简介

laravel-elixir-rev-manifest 是一个用于通过 Laravel Elixir 自动版本化前端静态文件的 npm 包。

使用该包可以轻松实现对前端静态资源进行版本控制,并且能够更好地利用缓存机制,提升网站的性能。

安装

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

使用方法

  1. gulpfile.js 中,引入 laravel-elixir-rev-manifest
--- ------ - --------------------------

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

-------------------- -
    -- ---- ---- ----
---
  1. elixir 中使用 revManifest 方法:
--- ------ - --------------------------

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

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

其中,.revManifest() 方法用于生成版本控制文件 rev-manifest.json,该文件将存储每个文件的版本号。

  1. 在 HTML 中,引入静态资源时,进行版本控制:
----- ---------------- -------- --------------------- ----
------- ------- ------------------- -------------

在上述代码中,elixir() 方法通过读取 rev-manifest.json 文件来获取相应的静态资源版本号。

示例代码

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

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

在上述代码中,我们先使用 .sass().scripts() 方法来编译生成 CSS 和 JS 文件,然后使用 .version() 方法对这些文件进行版本控制,最后调用 .revManifest() 方法生成版本控制文件。

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


猜你喜欢

  • npm 包 generator-zefr 使用教程

    前言 如果你作为前端开发者经常在开发项目中使用 yeoman,并且还没尝试过 generator-zefr 这个 npm 包的话,那么这篇文章将为你介绍如何使用它。

    2 年前
  • npm 包 arraybag 使用教程

    在前端开发中,经常会涉及到数组的操作和处理。而 npm 包 arraybag 提供了一系列的工具函数,可以帮助我们高效地处理数组。本文将介绍如何安装和使用 arraybag 包,并对其中的一些常用函数...

    2 年前
  • npm 包 bunq-api 使用教程

    在前端开发中,使用第三方库可以有效地提高开发效率和质量。在这篇文章中,我们将介绍如何使用一个非常有用的 npm 包——bunq-api 来简化我们的前端开发工作。 什么是 bunq-api? bunq...

    2 年前
  • npm 包 set-lru 使用教程

    什么是 LRU 算法? LRU(Least Recently Used)是一种内存缓存淘汰算法,可以根据访问时间或者使用频率淘汰最近最少使用的缓存数据,从而保证高效利用内存资源。

    2 年前
  • npm 包 how-old 使用教程

    前言 在前端开发中,我们经常需要根据生日计算某个人的年龄。虽然可能会自己写一个方法来实现,但是这里推荐使用如下开源的 npm 包:how-old。 how-old 是一款用来计算年龄的 npm 包,它...

    2 年前
  • npm 包 chrome-meme-search 使用教程

    1. 简介 chrome-meme-search 是一个能够让你在 Chrome 浏览器中快速搜索并插入常见的表情包和梗图的 Chrome 插件。它是通过在 Chrome 地址栏中输入一些特定的命令实...

    2 年前
  • npm 包 mark-twain-loader 使用教程

    在前端开发中,我们经常需要处理一些文本文件,比如 Markdown 文件,以便将其转换为 HTML。这时候,mark-twain-loader 这个 NPM 包就派上用场了。

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

    简介 我们都知道,MIP(移动网页加速器,Mobile Instant Pages)是一种由百度推出的开源技术,通过对页面进行一系列的优化及特定的限制,将页面性能提升至极致,提高用户访问体验。

    2 年前
  • npm 包 test-lib-w 使用教程

    npm(Node.js 包管理器)是用于 Node.js 包管理的工具。使用 npm,开发人员可以轻松地安装、使用、共享和分发 Node.js 模块。test-lib-w 是一个基于 npm 的前端测...

    2 年前
  • npm包Adonis-parse-sdk使用教程

    前言 Adonis-parse-sdk 是 Node.js 的一个 NPM 包,它提供了一系列的 API 接口,以便与 Parse 后端互动,使得开发 Parse 应用程序更加便捷。

    2 年前
  • npm 包 @antixrist/vue-flatpickr 使用教程

    前言 Flatpickr 是一个轻量级的 JavaScript 日期和时间选择器,它的特点是开放式和可定制。Flatpickr 支持现代浏览器和 IE 11+,可以以模态和行内模式显示。

    2 年前
  • npm 包 gulp-base64-encode-font 使用教程

    在前端开发中,我们有时需要使用自定义的字体来美化页面。但是,使用自定义字体需要将字体文件上传到服务器,增加服务器的负担,同时也会导致页面加载速度变慢。为了解决这个问题,我们可以使用 npm 包 gul...

    2 年前
  • 前端必学工具:npm 包 jedi-count-files 使用教程

    如果你是一名前端开发者,你一定知道 npm。 npm 是 Node.js 的包管理器,它允许开发者共享和重用代码。如果你需要使用一个库或框架,只需要通过 npm 安装,就可以在自己的项目中使用。

    2 年前
  • npm 包 aid.css 使用教程

    什么是 npm 包 npm(Node Package Manager)是一个包管理器,它是一种用于 Node.js 的工具,用于从公共和私有源中分发代码和管理依赖关系。

    2 年前
  • npm 包 kap-plugin-test 使用教程

    介绍 kap-plugin-test 是一个用于 Kap 录屏应用的插件,支持用户在录制视频时进行特定的测试操作,方便测试人员进行录屏操作,提高测试效率。 本文将详细介绍如何使用 kap-plugin...

    2 年前
  • npm 包 base.stylus 使用教程

    前言 在前端开发中,CSS 是不可或缺的一部分。而在 CSS 中,样式的复用性和维护性是很重要的。在这一方面,Stylus 是一个非常优秀的 CSS 预处理器,而其基于 Stylus 的 npm 包 ...

    2 年前
  • npm 包 xc-urlparam 使用教程

    前言 当我们在前端开发中需要传递多个参数时,我们会很自然地想到使用 URL 参数的方式来传递参数。在操作 URL 参数的过程中,我们需要对参数进行拆分和组合,这个过程可能会比较繁琐和易错。

    2 年前
  • npm 包 local-runner 使用教程

    前言 在开发前端项目时,我们经常需要启动一个本地服务器来访问应用程序。对于简单的项目,我们可以使用 http-server 或 webpack-dev-server 等工具来快速启动本地服务器。

    2 年前
  • npm 包 cordova-plugin-android-utilities 使用教程

    cordova-plugin-android-utilities 是一个针对 Cordova/PhoneGap 应用程序的 Android 原生工具插件,它提供了一系列可用于增强移动应用程序的 And...

    2 年前
  • npm 包 usestate 使用教程

    useState 是 React 提供的一个用于在函数组件中管理状态的钩子函数。可以使用它来实现组件状态的交互性,使组件可以根据用户的操作动态地改变自己的状态。本文将详细介绍如何使用 useState...

    2 年前

相关推荐

    暂无文章