External Config

John Lindquist: Let's combine uglifying, watching, and config stuff into one Grunt file to make it more of a standard Grunt file.

We'll load in Watch and we'll configure Watch here so the files we want to watch are actually just the exact same files as we have here.

The tasks that we want to run is just Uglify. Now we can go ahead and run Grunt Watch, and you can see that any time I change one to a new change and hit save, you can see that solid one changed and it created the minified version of the file.

If I open this up, you can see that our minified file matches our one file. One side note in WebStorm -- because it has a virtual file system on top of the regular file system, sometimes external changes like in this Grunt file...You see I saved it there -- sometimes that doesn't get synched up so you may have to synchronize for it to get synched up with the virtual file system that handles all the re-factoring and smart features and stuff. Typically you don't read these files anyway so it's not really a big issue.

Anyway, let's go back here. You can see that we've duplicated these. That's never a good thing so let's go ahead and cut that out. We'll just name them something like "ComPF" and we'll call this "Input" just to keep it clear. Our input will be that.

We'll use our template so if you remember the templating. You want to read in comPF.input. We'll use him here, as well. Let's go ahead and rerun Grunt Watch. You can see that it's still working after change. Graph to template. Hit save. You can see that everything is still working exactly as it did before.

Now let's go ahead and take all of this and drop it into our config file instead. We'll drop into our config.json file. Select everything here. Change this to input. Clean that up a bit. Once we're back in our Grunt file we can say, "Grunt file read json," and load in our config.json file and then, again, if we do Grunt Watch you can see, one last time, that everything should still be working. We'll sync this up one last time.

You can see here that we've basically done everything you would see in a typical Grunt file. We've loaded in some MPM tasks. We haven't registered any tasks or any multitasks. We'll get into that more later but we have configured tasks that we've loaded in. Some of the confusion comes around...If you're new to Grunt you'll see something like this. Where's that coming from compared to where's this coming from, where's that coming from? These are just configurations for things you load in.

This is your own thing that you've configured and sometimes it's loaded in from some external file or sometimes it's just configured in line here. These templates are what are reading in the properties that are defined off of your configuration.

That's basically what you'll see in every Grunt file. Once you've learned these main things, you can probably understand most of the Grunt files out there.