Gulp rename

Updated February 17, 2023

Introduction to Gulp rename

We know that Gulp is used to automate web tasks of developers; it provides different kinds of features to the developer during automation. The rename is one of the features that are offered by Gulp. Gulp development sometimes requires the developer to rename the file; at that time, the developer can use the rename feature. The developer can also rename the folder names as per their requirement. In other words, we can say that sometimes the developer wants to modify the JavaScript file, or we need to copy them at that time; we can use the gulp rename method.

What is Gulp rename?

The npm package gulp renames get an aggregate of 581,876 downloads. Swallow rename notoriety was delegated well-known. The dest() can be utilized in a pipeline to compose halfway states to the file system. Whenever a document is gotten, the present status is worked out to the file system; the way is refreshed to address the new area of the result record, then, at that point, that scrape goes on down the pipeline. By and large, a site or a JavaScript application contains a few JavaScript documents. Moreover, the program should get those records from the server to stack the page. Downloading more papers takes additional time as the program needs to send more HTTP demands.

We attempt to convey an ideal experience whenever we make sites. This incorporates having our website pages show quickly. Some time ago, this implied having every one of our styles in one CSS document. All Gulp setup goes in a record called gulpfile.js, situated at the foundation of the undertaking. The example for composing assignments is that you first burden a module you will utilize and characterize a project that depends on that module afterward. Gulp is module-driven; you want to know which module to use to achieve something. Usually, a solitary module has a solitary reason, and all the modules are customary JavaScript.

Using Gulp rename

Now let’s see how we can use gulp rename as follows:

Code:

var renamefile = require("gulp-rename");
// rename file with fixed value
gulp.src("./Gulp/Demo/main/text/demofile.txt")
.pipe(rename("Demo/main/text/sample/secondfile.txt"))
.pipe(gulp.dest("./Gulp/Demo/main/text"));
// By using mutating function to perform rename
gulp.src("./Gulp/Demo/**/demofile.txt")
.pipe(rename(function (path) {
// Updates different object
path.directname += "/text";
path.bname += "sample";
path.ename = ".txt";
}))
.pipe(gulp.dest("./Gulp/Demo/main/"));
//By using map function for rename
gulp.src("./text/**/demofile.txt")
.pipe(rename(function (path) {
return {
directname: path. directname + "/text",
bname: path.bname + "sample"
ename: ".txt”
};
}))
.pipe(gulp.dest("./text"));
// rename via a fixed objec
gulp.src("./Gulp/Demo/main/text/demofile.txt", { base: process.cwd() })
.pipe(rename({
dirname: "Demo/main/text",
bname: "texfile",
pre: "sampledemo",
suff: "Demo",
ename: ".text"
}))
.pipe(gulp.dest("./Demo/main"));

Explanation:

• dirrectname is the general way from the base index set by gulp.src to the filename.gulp.src() utilizes glob-stream, which sets the base to the parent of the main registry demo (*, **, [], or extdemo). dirrectname is the leftover catalogs or ./if none. Glob-stream forms >= 3.1.0 (utilized by swallow >= 3.2.2) acknowledge a base choice, which can be used to set the base expressly.
• gulp.dest() renames the registries among the process.cwd() and dirrectname (for example, the base comparative with CWD). Use dirrectname to rename the registries matched by the glob or descendants of the foundation of choice. bname is the filename without the augmentation-like path.bname(filename, path.ename(specified filename)). ename is the record augmentation, including the. like path.ename(specified filename).
• While utilizing a capacity, a second record contention is furnished with the entire setting and unique document esteem. While using a capacity, on the off chance that no Object is returned, the passed boundary object (alongside any adjustments) is re-utilized.

Examples of Gulp rename

Now let’s see different examples of gulp rename as follows:

Now let’s see how we can install gulp as follows:

First, we need to confirm all setup and installation of gulp with the help of the following command.

Code:

node -v

Explanation:

• 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 introduced Node.js form with the help of the below command.

Code:

npm -v

Explanation:

• 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 -g

Explanation:

• 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:

For verification of gulp, we need to run the below command below.

Code:

gulp –v

Explanation:

• After executing the above command, we get the currently installed version of a gulp, as shown in the screenshot below.

Output:

Now we can add the rename plugin in gulp with the help of the following command.

Code:

npm install gulp-rename

First, let’s see how we can perform a rename operation using the following function.

Code:

var gulpr = require('gulp');
var renamef = require("gulp-rename");
gulp.task('renamef', function() {
gulp.src("maps/Gulp/Demo/main.txt")
.pipe(rename(function (path) {
path.dname += "/txt";
path.bname = "file.txt";
path.ename = ".txt"
}))
.pipe(gulp.dest("./Demo/main/dist"));
});

Explanation:

• In the above example, we try to implement a rename method here. First, declare the variable shown in the above code after using the map function to rename the file from the source folder and store the renamed file inside the destination folder. The final output is shown in the below screenshot as follows.

Output:

Similarly, we can implement using different methods mentioned in usages.

Conclusion

With the help of the above article, we saw about the Gulp rename. From this article, we learned basic things about the Gulp rename, and we also saw the integration of the Gulp rename and how we use it in the Gulp rename.

Recommended Articles

This is a guide to Gulp rename. Here we discuss the introduction, using gulp rename and examples to understand better. You may also have a look at the following articles to learn more –

1. JavaScript onresize
2. JavaScript onload
3. JavaScript String to Boolean
4. Javascript String to Lowercase