Grunt will clean up your build with the grunt-contrib-clean to make sure that no artifacts from previous builds are hanging around.

Cleaning your build folder with grunt-contrib-clean

Man: [00:00] Let's go ahead and set up a clean task so that we can make sure our build directory is clean every time we run a new build.

[00:05] In the last few steps, we added a few new tasks to our Grunt file. We added a concat task that would go ahead and concatenate all of our JavaScript files into one app.js. Then, we added Uglify, which will take our concatenated JavaScript and minify it.

[00:21] Every time we run the build, we need to know that the build directory was empty when the build started. We don't want any leftover artifacts from previous builds in the build directory. The clean task will help us take care of that.

[00:32] Let's go ahead and start out our set up by installing the clean task. We'll say, "mpm install Grunt-contrib-clean," we'll use the save dev that will save it to our package.json.

[00:44] Once that's installed, we go ahead and load it over here by putting clean here and now, we're ready to go. Clean is super simple to configure.

[00:53] We'll add a clean section. We'll give it a target called, "build." You'll need to give it a string. So, in this case, I want it to clean out the build directory. Let's go ahead and hit save.

[01:05] Now, if we type, grunt clean and we tell it to just run the build target, it will go ahead and run. When we look up here, our build directory is gone.

[01:15] By using clean, we'll make sure that our build directory is clean every single time we run a build so that we don't end up with stale artifacts.

[01:22] Now, let's combine build with concat and Uglify for the first part of our build. The first thing you want to do is do clean on the build directory. The second thing we want to do is concatenate our JavaScript. The third thing we want to do is run Uglify.

[01:39] If we run this, it will run all three tasks and we should have a build folder with an uglified JavaScript.

[01:46] From the terminal you type, "grunt build." It will run all three.

[01:51] If you look at the log, you can see it cleaned the build folder. It concatenated our JavaScript. It uglified our JavaScript.

[01:58] When we are done, we're finished with others. If we look up here, we have a build directory with our new app.js that's minified.

Cleaning your build folder with grunt-contrib-clean

Share this video with your friends