Gulp replace

Updated February 17, 2023

Introduction to Gulp replace

We know that Gulp is used to automate web tasks of developers; it provides different kinds of features to the developer during automation. The replacement is one of the features that are provided by the Gulp. For example, sometimes developers want to replace the text of the file, but at that time, they can use the gulp replace option. The developer is also able to replace the functions 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 replace method.

Overview of Gulp replace

Gulp replaced notoriety and 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, and 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 records takes additional time as the program needs to send more HTTP demands.

The group of well-being score, ubiquity, security, and support from there, and the sky is the limit. Gulp replace by supplanting text content in documents. For example, the sample/demo envelope would contain just the documents after running the errand: Given a sources organizer containing region explicit subfolders. Whenever we make sites, we continuously attempt to convey the ideal experience. 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.

How to Use Gulp replace?

Now let’s see how we can use the replace method as follows:

But 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 submitted 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 by 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:

To verify gulp, we need to run the below command as follows.

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 need to run the below command to install replace as follows.

Code:

npm install – save- dev gulp-replace

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

First, let’s see if we want to replace a simple string; then, we can use the code below.

Code:

const replacef = require('gulp-replace');
const { fsrc, fdest } = require('gulp');
function replacedemo() {
 return fsrc(['sample.txt'])
  .pipe(replace('line', 'linee'))
  .pipe(fdest('Gulp/Demo/'));
};
exports.replacedemo= replacedemo;

Explanation:

• In the above usages, first, we declare constant; after that, we create the function, and inside the function, we pass the source file name and text that we want to replace, and at the end, we set the destination path.

Now let’s see how we can replace regexes as follows:

Code:

const replacef = require('gulp-replace');
const { fsrc, fdest } = require('gulp');
function replacedemo() {
 return fsrc(['sample.txt'])
  .pipe(replace(/line(.{6}), '$2text'))
  .pipe(fdest('Gulp/Demo/'));
};
exports.replacedemo= replacedemo;

Explanation:

• In the above usages, first, we declare constant; after that, we create the function, and inside the function, we pass the source file name as well as line number of a string with replacing text that we want to replace and at the end, we set the destination path.

Let’s see how we can replace a string with a callback function.

Code:

const replacef = require('gulp-replace');
const { fsrc, fdest } = require('gulp');
function replacedemo() {
return fsrc(['sample.txt'])
  .pipe(replace(‘line’, required function with math)
  .pipe(fdest('Gulp/Demo/'));
};
exports.replacedemo= replacedemo;

Explanation:

• In this usage, the difference is that we set the callback function to replace the string as per our requirement, as shown in the above code.

Gulp replace string

Now let’s see an example of the replace method as follows:

But first, we need to create the .js file and add the below code as follows.

Code:

var gulpf = require('gulp');
var freplace = require('gulp-replace-task');
gulp.task('sample', function () {
 gulp
  .src('Gulp/Demo/exp.txt ')
   .pipe(
    replace({
     patterns: [
      {
       match: 'hidemouser',
       replacement: ‘hiwelcomedemouser’
      }
     ]
    })
   )
    .pipe(gulp.dest('build'));
});

Explanation:

• In the above example, we try to implement the replace string method with a single string; here, we have already created the file exp.txt, and inside the text file, we have a different string; here, we try to replace the hide mouse string with hiwelcomedemouser’ as shown in above code. The end result of the above implementation is shown in the below screenshot.

Output:

In the same way, we can implement a replace method for multiple strings as per our requirement.

Conclusion

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

Recommended Articles

This is a guide to Gulp replace. Here we discuss the introduction, overview, and how to use gulp replace with string. 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