This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Cleaning your build folder with grunt-contrib-clean

2:05 JavaScript lesson by

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


egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
askar

Hello!

How do you enable port number 3000 in this video?
Another videos are using port 8080...

Having the lesson is OK, but it'd be helpful if you show also how do you start webserver with a port.

Thanks.

In reply to egghead.io
Avatar
Austin

I noticed that you used concat before using uglify. Uglify has the ability to concatenate files, so concatenating before uglifying is not necessary.

See this from the grunt-contrib-uglify documentation:
https://www.npmjs.com/package/grunt-contrib-uglify#basic-compression

Notice that more than one source file is being directed to a destination file in their first example; all of these get concatenated before being uglified.

Avatar

you have to run a server and configure it to listen for that port.

In reply to askar

Man: 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.

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.

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.

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.

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.

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.

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.

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.

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.

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

From the terminal you type, "grunt build." It will run all three.

If you look at the log, you can see it cleaned the build folder. It concatenated our JavaScript. It uglified our JavaScript.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?