Updated February 17, 2023
Introduction to Gulp clean
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. Gulp supports the clean feature, which removes unwanted files, folders, etc. Sometimes we need to remove or clear unwanted images and photos; at that time, we can use the clean feature of gulp. We can clean files and folders from a specific location during the operation. In other words, we can say that it removes the unwanted files before the execution, or we can say that it is before building.
What is Gulp clean?
Each target can be called using the gulp order. Be that as it may, each target can likewise be viewed as a reliance on different targets. Gulp likewise knows one exceptionally extraordinary objective, which is named default. The default target is the one that is called when the gulp order is summoned with no extra boundary. It is a decent practice to look at it as a “make all”- sort of guidance. Subsequently, as a rule, we would give conditions on any remaining (sub-) errands.
Whenever the default task is clean, it requires the spotless assignment to run; then, at that point, the styles last the task of the content. The request is significant, even though Gulp can parallelize the form interaction if the stream object isn’t returned. Accordingly, the spotless undertaking should return the stream; generally, the entire framework might vaguely rely upon the sub-assignments’ advancement.
How about we characterize the perfect errand with the necessary conditions? Here we give an extra contention to the src technique, which indicates that the items in the index ought not to be perused. The main thing we care about is the data that index to clean. 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 an undertaking that depends on that module afterward. Gulp is module-driven; you want to know which module to utilize to achieve something. Normally, a solitary module has a solitary reason, and all the modules are customary JavaScript. To characterize an undertaking, utilize the gulp.task() work. Whenever you characterize a straightforward undertaking, this capacity takes two ascribes the assignment’s name and a capacity to run.
How to Use Gulp clean?
Let’s see how we can use gulp clean as follows:
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 introduced 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:
For verification of gulp, we need to run the below command below.
Code:
gulp –vExplanation:
- After executing the above command, we get the currently installed version of a gulp, as shown in the screenshot below.
Output:
After that, we need to install the clean with the help of the below command.
Code:
npm install --save-dev gulp-cleanNow let’s see the usages as follows:
Code:
var gulpc = require('gulp');
var cleanc = require('gulp-clean');
gulp.task('cleantask', function () {
return gulp.src('Gulp/Demo/sample', {read: false})
.pipe(clean());
});Examples of Gulp clean
Let’s see different examples of gulp clean as follows:
Code:
var gulpv= require('gulp');
var cleanv = require('gulp-clean');
gulp.task('cleandemo', function () {
return gulp.src('Gulp/Demo/sample', {read: false})
.pipe(clean());
});Explanation:
- Choice read false keeps gulp from perusing the items in the document and makes this errand much quicker. Assuming you want the record and its items subsequent to cleaning in a similar stream, don’t make the read choice misleading.
- The end output of the above implementation can be seen in the below screenshot.
Output:
If we want to delete a specific file or folder, we can use the following code.
Code:
var gulpv= require('gulp');
var cleanv = require('gulp-clean');
gulp.task('cleansample', function () {
return gulp.src('Gulp/Demo/sample/home.js’})
.pipe(clean({force: true}))
.pipe(gulp.dest(‘Gulp/Demo/sample’));
});Explanation:
- In the above example, we forcefully clan the home.js file. Here we first pass the file’s path, and at the end, we add the destination path as shown.
- The end output of the above implementation we can see below screenshot is as follows.
Output:
If we want to clean as a dependency, we can use the following code.
Code:
var gulpv= require('gulp');
var cleanv = require('gulp-clean');
gulp.task('cleansampled', function () {
return gulp.src('Gulp/Demo/sample/home.js’{read:false})
.pipe(clean())});
Gulp.task(‘default’, [‘clean-default’], function(){
Gulp.src(‘Gulp/Demo/sample’)});Explanation:
- In the above program, we try to implement the clean task when we have clean as a dependency; here, we first declare the variable that we require; after that, we define the function to return the source file and put it into the pipe for cleaning the file, and after that, we need to store the result into the destination file as shown in the above program.
- The end result of the above implementation is shown in the below screenshot.
Output:
Conclusion
With the help of the above article, we saw about the Gulp clean. From this article, we learned basic things about Gulp clean and saw the integration of Gulp clean and how we use it in Gulp clean.
Recommended Articles
This is a guide to Gulp clean. Here we discuss the introduction and how to use gulp clean with examples for better understanding. You may also have a look at the following articles to learn more –
