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

  • Overview
  • Transcript

4.1 How to Concatenate and Minify JavaScript Files

In this lesson you’re going to learn how to concatenate and minify JavaScript files.

Related Links

4.1 How to Concatenate and Minify JavaScript Files

Hello, and welcome back to this course. In this lesson, you're going to learn how to minify and concatenate JavaScript files. Now this is very good practice for front end development, because what happens is when you're loading multiple JavaScript files, or multiple files in general. There will be a request to the server for each of those files. And depending on the size of those files, that can slow down the page load time. So, to increase performance, you would concatenate or merge those files into a single one. In the case of JavaScript files, after merging, you can also minify that file. Minifying basically removes all whitespace, decreasing the file size significantly, and also by doing that you decrease the page load time and you increase performance. Now, in our case we're gonna be using two plugins, they're called gulp-concat and gulp-uglify. So let's first install those plugins, so I'm gonna say npm install gulp-uglify and also gulp-concat. You can install multiple plugins at the same time, simply list them like I did here. And let's not forget to save them as a dependency. Once that's done, let's load those plugins in our Gulp file. So I'm gonna say minifyJS require("gulp-uglify") and also concatJS. Again you can call this whatever you want, require("gulp-concat"). Let's go ahead and run a task. We're gonna call this task JS and we're gonna run it in our default, along with all the others and we're gonna write it right here. We're gonna say Concatenate and minify JS. So gulp.task( 'js', function() we're gonna return gulp.src. So first, we're grabbing all of our JavaScript files in our case, they're in source-js-lib library. And then, I'm gonna also select old subfolders if applicable and all the files with the extension of js. Then, we're gonna pipe them through the concatJS plugin. And as a parameter, we can specify what's the name of the file that's gonna be rendered. In my case, I wanted them to be concatenated into scripts.js and then, I want to pipe them through minifyJS. And of course we can set certain properties for this as well. And then we're gonna pipe them through gulp.dest into the js folder. All right, so we have two JavaScript files. We have a main one which simply adds an event listener on DOMContentLoaded, and does a console.log. And a plugin.js, which adds an event listener to the smart-link element. And when we click it, it does a console.log as well. And in our HTML file, we're loading scripts.n.js., let's change this to scripts.js. Right, so now if we go to our terminal, and we say, gulpjs, this will run the java script or the js task. It's gonna take these two files and compile them, it's gonna concatenate them. And it's gonna minify them into scripts.js, very, very handy. You saw just how easy that was. And, of course, that works with any number of JavaScript files. Now let's also watch for file changes, so we're gonna go right here. And we're gonna say gulp.watch, right? So, I'm gonna watch for 'src/js/lib/ all the sub folders, and then inside those files with the extension of js. And when that happens, we're gonna trigger the watch.js function. So let's go ahead and write the watch.js, we're doing a separate function, because we want brother reloading for this. So watch.js, before it's ran, it has to execute the JS function, yeah, we'll just do a browser reload. All right, so let's take another look, let's run Gulp from our terminal, now it opens our page here. If we take a look at the inspector, we're gonna see that the scripts were executed correctly. So here we have the first console log from our main script, and if we click this link, we're gonna get the second console log from our plugin.js file. All right, and let's actually see if we change something here, let's add two additional exclamation marks. Right, this should have triggered, yeah. So this trigger the watch.js function, it executed JS it reloaded browser. So now if I click the link, we have the updated version. And that's it really, that's how you can process or work with JavaScript files using Gulp. Now a very useful feature can be enabled here by Gulp with the use of a plug in called JSHint. This allows you to check your JavaScript code for errors, and we all know how annoying those errors can be when you forget a semicolon somewhere, or you misspell a variable name, right? That can cause a lot of troubleshooting later if you don't catch these errors on time. And a very simple way, as I was saying, is with the help of a plugin called JSHint. We're gonna have a look at that in the next lesson.

Back to the top