Updated February 17, 2023
Introduction to Gulp rev
The following article provides an outline for Gulp rev. We know that gulp is used to automate different tasks such as CESS and HTML as well as it also provides the support to merge the other files as per our requirement and compile SASS files. During the website development, we need to maintain the version of our build and retain the structure automation of the project. So that purpose, gulp provides the revisioning files features to the developer, so the developer can easily maintain the revised version of files appended by the hash-based content. After the appended operation, a developer can create a new file to match the content of the original files.
What is Gulp rev?
Gulp-rev takes a few records and makes revisioned variants by annexing a hash given the document’s content. It likewise makes a rev-up manifest.json record with key esteem matching the first document names to the revisioned document names. This makes it simple to refer to a static name while having the option to involve dynamic file names for store busting. We should investigate how we can get this functioning. First, make a gulp-rev up undertakings to deal with our modifications.
We want to get every one of the records we need to correct. You should modify all your resources to make store nullification more straightforward later. A short time later, we pipe it through rev up() and direct the result to any place we need using a gulp. dest. Then we can compose the manifest with rev. manifest(). This will supplant our old manifest with another one. Present-day web improvement has numerous tedious assignments like running a nearby server, minifying code, enhancing pictures, and preprocessing CSS; the sky’s the limit. This text examines Gulp, a forming apparatus for robotizing these errands.
Gulp rev Forcerev
Let’s see how we can install the gulp rev as follows:
But first, we need to confirm all setup and installation of gulp with the help of the following command.
Code:
node -vExplanation:
- Using the above command, we can see the installed version of Node.js; after execution, we can see the result in the following command.
Output:
In the command line prompt, enter the accompanying order to show the variant of npm (Node.js bundle chief), which is utilized to introduce modules. It will show the submitted Node.js form with the help of the below command.
Code:
npm -vExplanation:
- After executing the above command, we can see the currently installed version of npm on our machine, as shown in the screenshot below.
Output:
We successfully installed Node.js; now, we need to install the gulp using the below command.
Code:
npm install gulp -gExplanation:
- In the above command, we use g for a flag that ensures gulp is globally available for all projects. After entering the above command, we get the following screen, as shown in the below screenshot.
Output:
To verify gulp, we need to run the below command as follows.
Code:
gulp –vExplanation:
- After executing the above command, we get the currently installed version of a gulp, as shown in the screenshot below.
Output:
Now we can install the gulp –rev with the help of the below command.
Code:
$ npm install --save-dev gulp-revLet’s see the usages of gulp-rev as follows:
Code:
const gulpr = require('gulp');
const rev f= require('gulp-rev');
gulp.task('defaulttask', () =>
gulp.src('Gulp/Demo/src/*.css')
.pipe(rev())
.pipe(gulp.dest('dist'))
);Explanation:
Using the above usages, we can implement gulp-rev; during the implementation time, we can consider the following parameters.
- Path: The type of path string and default path is rev-mainifest.json.
- Option: The type of option string and default base is a process.cwd ().
- cwd: Type of option string and default base is a process.cwd().
- Merge: The type of merge is Boolean, and the default is false and exists in manifest files.
- Transformer: The type of transformer is an object, and the default is JSON. An item with parse and stringify strategies. This can be utilized to give a custom transformer rather than the default JSON for the manifest file. An object with parse and stringify strategies. This can provide a custom transformer rather than the default JSON for the manifest record.
Gulp rev Replace
Let’s see rev replace as follows:
For installation of rev replace, we need to use the below command as follows:
Code:
$ npm install --save-dev gulp-rev-replaceExplanation:
- This module is done for projects with specific pages like single pages applications. We need instrument supplanting connections to put them on CDNs. There are great modules like swallow fire supplant; however, assume we compose HTML in Jade or how we unexpectedly utilize CDN.
- We figure it can be more straightforward with devices like this. Pipe through a stream that has both the records you need to be refreshed and the documents that have been renamed.
Now let’s see the usages as follows:
Code:
var gulpr = require('gulp');
var revr = require('gulp-rev');
var revReplacer = require('gulp-rev-replace');
var userefr = require('gulp-useref');
var filterr = require('gulp-filter');
var uglifyr = require('gulp-uglify');
var cssor = require('gulp-csso');
gulp.task("sampletask", function() {
var jsFilterr = filter("Gulp/Demo/.js", { restore: true });
var cssFilterr = filter("Gulp/Demo/.css", { restore: true });
var indexHtmlFilterr = filter([' Gulp/Demo/', '!**/home.html'], { restore: true });
return gulp.src("Gulp/Demo/src/home.html")
.pipe(userefr())
.pipe(jsFilterr)
.pipe(uglifyr())
.pipe(jsFilterr.restore)
.pipe(cssFilterr)
.pipe(cssor())
.pipe(cssFilterr.restore)
.pipe(indexHtmlFilterr)
.pipe(rev())
.pipe(indexHtmlFilterr.restore)
.pipe(revReplace())
.pipe(gulp.dest('public'));
});Example of Gulp rev
Given below is the example of Gulp rev:
Code:
const gulpr = require('gulp');
const revr = require('gulp-rev');
gulp.task('samplerev', () =>
gulp.src('Gulp/Demo/src/*.css')
.pipe(rev())
.pipe(gulp.dest('dist'))
);Output:
Conclusion
With the help of the above article, we saw about Gulp rev. From this article, we saw basic things about Gulp rev and the integration of Gulp rev, and how we use it in Gulp rev.
Recommended Articles
This is a guide to Gulp rev. Here we discuss the introduction, gulp rev forcerev, replace, and example for better understanding. You may also have a look at the following articles to learn more –
