7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.2 How to Rename and Delete Files

Hello and welcome back to this course. In this lesson, you're going to learn how to delete files and folders, and also how to rename them. That is possible with the help of two plugins, gulp-clean, that's for deleting, and gulp-rename for, you guessed it, renaming. So let's go ahead and, just like all the other plugins, install them. So, npm install gulp-rename and gulp-clean, and we're gonna save those as dependencies. Now I'm gonna go ahead and load them in our page. I'm gonna say clean = require('gulp-clean') and rename is gonna require('gulp-rename'). Let's see, have these installed correctly, yes they have. Okay, first of all, gulp-clean, what could we use it for? Well, it's actually a much needed plugin, because look what happens. Every time we're running Gulp, we're executing all of those tasks and we're basically copying or sending files to the distribution folder. But it would be nice to have a clean start every time we do that. So, before we run any other task, we need to get rid of the existing dist folder. That way we have a clean slate every time. So we're gonna write a task which will delete the dist folder so the build can start fresh. So we're gonna say gulp.task, we're gonna call this reset, a simple function. And inside, we're gonna return gulp. We're gonna grab the distribution folder. And we're gonna pipe it through the clean plugin, just like that, right? So now all I gotta do is say gulp-clean or, sorry, gulp-reset, and that will get rid of the distribution folder. Now let's also put that in our sequence here. I'm gonna say reset and then followed by the rest of the tasks. Now, what about the rename plugin? Well, these can be used to rename files and folders. And the thing that we're gonna be using it here is to rename a certain file, specifically the scripts.js, to create a minified version. So currently, if we're running gulp That will create a scripts.js, which is minified and concatenated in our dist folder. But maybe I want to add another file, a scripts.js, which is concatenated but not minified, and one that's concatenated and minified. So to do that, we're gonna go back to our JS task and after concatenation, we're gonna pipe this through gulp.dest. We're gonna write it in distribution/js. And then we're gonna minify it. So here we're basically writing to the disk the concatenated scripts.js. After this, we're gonna take that stream, we're gonna minify it. And then We're gonna pipe it through our rename plugin. We're gonna rename it to scripts.min.js. This has several options. rename, you can change only the suffix if you want, you can change the base name, but the simplest method is just to write the filename directly, right? So after we rename it, we write it to the disk just like we did previously. So now, if we're just gonna run gulp.js, actually, let's do a gulp-reset to get rid of this distribution folder. And then gulp.js. All right, so that will create two files. One that's concatenated, scripts.js, and scripts.min.js, which is concatenated and minified. So those are two uses of the clean and rename plugins. Now in the next lesson, we're gonna learn how to handle errors in Gulp. See you there.

Back to the top