Include a unique identifier to a file name, and then update any mentions of it using Gulp

Question

Include a unique identifier to a file name, and then update any mentions of it using Gulp

I am trying to automate the process of renaming a CSS file and updating the reference in my PHP file. Currently, I have a file named base.css and a PHP file called styles.php containing the following code:

wp_enqueue_script('base', get_template_directory_uri() . '/css/base.css');

My goal is to use Gulp to hash rename the base.css file to something like base-375dfd5f.css and then automatically update the reference in styles.php to:

wp_enqueue_script('base', get_template_directory_uri() . '/css/base-375dfd5f.css');

html css gulp

Answer 1

Answer №1

To enhance your workflow, consider incorporating the Gulp rename pipe to adjust the CSS file name within your stream. Additionally, utilize Gulp inject string for updating the PHP file accordingly.

Here's an example implementation:

 var gulp   = require('gulp'),
     rename = require('gulp-rename'),
     inject = require('gulp-inject-string');

 var myHash = generateUniqueHash();

 gulp.task('UpdateCSSFileName', function () {
        return gulp.src('main.css')
                .pipe(rename('main' + myHash + '.css'))
                .pipe(gulp.dest('./dist')
 });

 gulp.task('InjectHashToPHP', function () {
        return gulp.src('index.php')
                .pipe(inject.replace('main.css', 'main' + myHash + '.css'))
                .pipe(gulp.dest('./dist')
 });

Answer 2

To enhance your workflow, consider incorporating the Gulp rename pipe to adjust the CSS file name within your stream. Additionally, utilize Gulp inject string for updating the PHP file accordingly.

Here's an example implementation:

 var gulp   = require('gulp'),
     rename = require('gulp-rename'),
     inject = require('gulp-inject-string');

 var myHash = generateUniqueHash();

 gulp.task('UpdateCSSFileName', function () {
        return gulp.src('main.css')
                .pipe(rename('main' + myHash + '.css'))
                .pipe(gulp.dest('./dist')
 });

 gulp.task('InjectHashToPHP', function () {
        return gulp.src('index.php')
                .pipe(inject.replace('main.css', 'main' + myHash + '.css'))
                .pipe(gulp.dest('./dist')
 });

Answer 3

Answer №2

After some research, I came across a helpful tool called gulp-cachebust that does exactly what I need: it assigns unique hashes to file names and updates references accordingly.

Latest Update

In the end, I opted for using gulp-rev to generate a manifest and modify file names, along with gulp-rev-replace to update references to those files. This approach has proven to be very effective.

Answer 4

After some research, I came across a helpful tool called gulp-cachebust that does exactly what I need: it assigns unique hashes to file names and updates references accordingly.

Latest Update

In the end, I opted for using gulp-rev to generate a manifest and modify file names, along with gulp-rev-replace to update references to those files. This approach has proven to be very effective.

Include a unique identifier to a file name, and then update any mentions of it using Gulp

Answer №1

Answer №2

Latest Update

Similar questions

I have a page division with scroll bars and I want to ensure that the entire content of the division is displayed

Conceal the form upon submission using Angular JS

Adjust the color of the navigation bar as you scroll

Ensure that adjacent elements operate independently from one another

Changing the height of columns in an email template for different screen sizes in Outlook

The CSS style of the Div element is not being displayed properly when embedded with JavaScript

Create a Seamless Scroll to Anchor Effect with JQuery and a Fixed Navigation Bar

the label remains grounded even as the browser autocompletes passwords with the password manager

My div is set to a specific width, but the content continues to overflow beyond its boundaries

Creating an HTML form that resembles StackOverflow's form

What is the best method to retrieve information from two tables on a webpage that have identical classes?

The range slider is malfunctioning in the audio player, JQuery, and HTML

What is the method for formatting within the <textarea> element?

Why does everything seem to move in sync with the table's scrolling?

Ensuring Proper Highlighting for HTML Select Options

When the text input is selected, automatically scroll to the bottom

Troubleshooting: CSS Animation issue with fade in and transform effects on individual words

What is the best way to eliminate excess space from the top and bottom of an HTML email?

Best practice for creating two side-by-side cards with responsiveness in Bootstrap and Django

Delay the page briefly before redirecting