The issue with Gulp revRewrite module failing to properly rewrite CSS and JS files within the project

I have been utilizing Gulp v.4 from npm along with the gulp-rev and gulp-rev-rewrite plugins to prevent Cache Busting of CSS and JS files. However, despite going through numerous guides and notes, I am encountering an issue where the links inside my HTML (specifically in a latte file) are not being rewritten as expected. The gulp-rev plugin seems to be functioning correctly, but the rewriting of links is not happening.

gulp.task('rev', () =>
    gulp.src('web/dist/**/*.{css,js}')
        .pipe(rev())
        .pipe(gulp.dest('web/dist/build'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('web/dist'))
);


function rew() {
    const manifest = gulp.src('web/dist/rev-manifest.json');

    return gulp.src('app/FrontModule/templates/_styles.latte')
        .pipe(revRewrite({ manifest: manifest }))
        .pipe(gulp.dest('test'));
}

The contents of rev-manifest.json are as follows:

{
  "bootstrap-t4s.min.css": "bootstrap-t4s-85b8c0fa84.min.css",
}

In the HTML (latte) file _styles.latte, I have the following link:

<link rel="stylesheet" href="css/bootstrap-t4s.min.css" media="all">

Upon running the gulp function to rewrite the file using the JSON manifest, the _styles.latte file remains unchanged:

<link rel="stylesheet" href="css/bootstrap-t4s.min.css" media="all">

I'm unsure of what I might be doing incorrectly. Any insights?

Answer №1

By default, the plugin gulp-rev-rewrite only replaces filenames in js, css, html, and handlebars files. If you want to change this behavior, you can use the option replaceInExtensions. Check out this example:

function customRewrite() {
  const manifest = gulp.src("web/dist/rev-manifest.json");

  return gulp
    .src("app/FrontModule/templates/_styles.latte")
    .pipe(revRewrite({ manifest: manifest, replaceInExtensions: [".latte"] }))
    .pipe(gulp.dest("test"));
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the appearance of the Bootstrap Typeahead

I've been experimenting with the Bootstrap Typeahead for my search feature. I successfully implemented the dropdown list using Ajax. However, I am looking to customize the width, padding, and background color of the dropdown menu, which is currently w ...

Preserve data on page even after refreshing in Angular

Upon opening my website, I expect to see "Finance/voucher" at the top. However, after refreshing the page, only "Finance" appears which is not what I want. I need it to always display "Finance/voucher" even after a page refresh. I have included all the r ...

Issues with displaying ngAnimate animations

For the past 10 hours, I've been attempting to get my animations to function properly. It seems that they only work when I include the animate.css stylesheet and use the "animated classname". However, when I try to create custom entrance and exit anim ...

Incorporate a personalized array into Google Autocomplete Places using AngularJS

I'm working on my application and I've implemented autocomplete for Google Places using the gm-places-autocomplete directive. However, I would like to enhance this autocomplete feature by incorporating my custom array of locations along with the ...

Mapping an array using getServerSideProps in NextJS - the ultimate guide!

I'm facing an issue while trying to utilize data fetched from the Twitch API in order to generate a list of streamers. However, when attempting to map the props obtained from getServerSideProps, I end up with a blank page. Interestingly, upon using co ...

React does not accept objects as valid children

Currently, I am working on developing a stopwatch using reactive js. Here is the code snippet that I have been working on: <div id="root"></div> <script src="https://unpkg.com/library/react.development.js"></script> <script sr ...

Guide to adding content at a particular location using the ACE Editor from within an Angular Controller

I am currently developing a real-time collaborative editor using the Ace editor library, but I am facing challenges with inserting text at a specific position within the editor. Specifically, I am looking to insert text at the cursor position when the use ...

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

Here is a snapshot of my user interface: Each node in the tree structure is represented by an <li> element along with an <a> link. Furthermore, each folder serves as a dropzone for file uploads similar to the drag-and-drop feature found in Gm ...

Recoil: Executing a function when an atom is modified

My goal is to store a user object in an atom and cache it in localStorage every time it changes to avoid having the user sign in repeatedly if the app crashes: localStorage.setItem('user', JSON.stringify(user)) Previously, with useContext, I ach ...

Utilizing jQuery for serializing unorganized lists

I have created multiple lists within a list and I need to pass the IDs using jQuery to another PHP file (updateDB.php). I attempted to serialize the list data but was unsuccessful. I'm not certain if I have implemented it correctly, I searched extens ...

Strategies for Handling Logic in Event Listeners: Choosing Between Adding a Listener or Implementing a Conditional "Gatekeeper"

What is the most effective way to manage the activation of logic within event listeners? In my experience, I've discovered three methods for controlling the logic contained in event listeners. Utilizing a variable accessible by all connected sockets ...

Creating PHP functions that return a JSON string when invoked - a simple guide

I have created a script that contains various functionalities, including fetching data from a database and encoding it into JSON. However, I want to be able to call different functions to execute these scripts separately. When I attempted to define and c ...

Yii2 HTML helper input must be marked as required

This is the form I have generated using the HTML helper: <div class="row"> <div class='form-group col-lg-6 col-sm-6'> <?= HTML::label('Name:','PropertyContactsNew',['class' => 'control-l ...

How to retrieve the value of an input field in Angular 2/Typescript without using ngModel

Currently, I'm utilizing Typescript in conjunction with Angular2, mirroring the structure of the Angular2 Tour of Heroes guide. There is a specific input field that I aim to associate a change event with, triggering custom logic whenever the value wi ...

Using JavaScript to make an asynchronous call to the server via AJAX

Is it true that clients can block JavaScript in their browsers? If so, what impact does it have on AJAX calls - do they still function properly? ...

Implement a hover animation for the "sign up" button using React

How can I add an on hover animation to the "sign up" button? I've been looking everywhere for a solution but haven't found anything yet. <div onClick={() => toggleRegister("login")}>Sign In</div> ...

Step-by-step guide to uploading an image with node.js, MySQL, and Express

Having recently delved into the world of Node.js, I came across a helpful tutorial on this website that taught me how to create REST APIs using Node.js. Now I'm trying to figure out how to upload an image file using Node.js and save it in a MySQL tabl ...

How to automatically choose the first option in a v-for loop in Vue.js

I have a loop that creates a dropdown menu from an array: <select class="form-control" v-model="compare_version" > <option v-for="(version, index) in allVersions" v-bind:value="index" v-bind: ...

At what point is it appropriate to terminate this database connection?

Currently, I am in the process of creating a script to update all entries within a database. To start off, I have implemented a logging feature to keep track of all modifications. const MongoClient = require('mongodb').MongoClient.connect("mong ...

Text color animation effect for menu

Here is the layout of my menu: <nav> <a href="#"> <span class="black">Home</span> <span class="red active">Home</span> </a> <a href="#"> <span class="black">Longer m ...