7 days of WordPress plugins, themes & templates - for free! Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 Concatenate and Uglify

With a web app build pipeline like the one we're building here, we'll typically want to combine JavaScript files as well as CSS files, and then minify the results. In this lesson we'll see how to perform both of these tasks.

3.3 Concatenate and Uglify

Hi folks, in this lesson we're gonna see how we can add concatenation and minification to our build. We're going to need a couple of packages for this lesson, we need one to concatenate our files and another two to minify them, one for the JS and a separate one for the CSS. Concatenation is the process of joining files together in order to avoid having many HTTP requests for the same types of resources. Minification is stripping out all unnecessary white-space and generally making the files as small as possible. So let's add the concatenation tasks first. We can add a new file to the gulp_tasks directory which we can call concat-js. Inside we need to require gulp and the gulp concat module. So, now we need to get the source files that we want to concatenate. We use gulp's SRC method as we have before and this time we pass it an array as we're going to need to get files from several different paths. One point to note is that the concatenate package will concatenate the files in the order that they are specified as well as the built files in the src.js built folder, we've also got jQuery in the SRC vendor directory and a couple of loose files just in src.js. We're probably gonna want to concatenate all of these together into a single file. Any files in the vendor directory are probably going to need to come first. Then we can add all of the built files from the src.js directory which will also pick up any files in the built directory. So now, we just need to pipe these to the concat module. And we need to tell the concat module what name the generated file should have and we just pass that as an argument. So, we'll call this file package.js. So, lastly we can write the concatenated file to a destination. So, this time, let's put the concatenated file into a folder called dist, and then in a sub-folder called JS. So, let's just test our new task quickly. So, we have a generated package.js file and it starts out with jQuery at the top. And then right down at the bottom, we've got the lint-test file from earlier on. So, we probably don't want to Include that and we can ignore files using the same path starting with an exclamation that we used previously, so let's just add that to the array of SRC files. And let's just try running that task one more time. So, this time it hasn't included that one. But for some reason it hasn't included the style test file and the reason it hasn't included that is because it's currently empty. So the reason why that's gonna to be empty is something to do with the JSCS task. So, let's just add our style breaking test back into the style test file. And let's just run the JSCS task once again. So, it looks like it's working in the way that it should, let's just try running it again and see if it empties the file. So, let's run the concat task once again and just check that it's being included this time And this time it's being included, great, okay. So, I'm not sure what happened with the style test file there, somehow that file got emptied. But the concat-js task is working, good. Okay, so we're probably gonna want to do the same for our CSS files. So, let's add another new file Into the gulp_tasks directory called concat-css. And this will be very similar to the concat-js file. We just want to change the paths so that we're loading our CSS files. And this time we'll call it package.css. And this time we'll put it in the dist/css folder. And our CSS folders currently empty so we'll just need to generate some CSS and we've got a task for that already, the Sass task, and we probably also would like to compile our TypeScript at the same time as our Sass. So, let's add a new task called compile and that will run both the Sass and TypeScript tasks. And let's just run that before we run the concat-css task. So, we have some CSS files and now let's run the concat-css. So, for some reason that is not generating a CSS file. So, now we have separate tasks for concatenating the CSS and the JavaScript. So, let's just create a concat task and that should run both of these tasks for us. Perfect. So, one thing that we can do with our concatenation tasks is to add source maps. We should now get source maps generated for both of the concatenated. So, now let's move on to the minification. We need another new JavaScript file in the gulp tasks directory for this one and we'll call this one minify-js. And the format of the code inside should be pretty familiar by now. So, as before, we get the input files, pipe them to whichever package we're using and then write the results to an actual file. If we were to run this now, we should find that it works, but it overwrites the input file. This may or may not be what we want and if it isn't what we want, maybe we want to create a new file with a .min extension. To do that we'll need to use another gulp-module. So, let's just install that quickly, it's called gulp-rename. And now we just need to update the minify task to use the rename package. And we need to insert this pipe in between where we Uglify and where we write the destination file. So, we need to pass a configuration object to the rename module and we just need to tell it what suffix we want to give our file. So, let's try running the Minified JS task now. So, now we find we have a package.min.js, as well as our package.js file. Let's just open it up and take a quick look. So, what's happened is that the Uglify plugin has stripped all of the comments out of the file and to use jQuery legally, according to its license, the comment certainly, the comment, right at the top of the file, needs to be in place, so we better fix that quickly. We need to use a separate module for this. It's an Uglify plugin, and it's, called, uglify-save-license. So, let's install that quickly. So, we don't need to require this plugin in the same way because it's just the plugin. We just need to add a configuration option. So, now let's runs the task again. And this time it's kept the license comment at the top of the file and that's exactly what we want. We probably also want to generate a source map and we can do that in the same way as before using the gulp-sourcemaps module. And now we have a map file for a minified JavaScript file as well. Awesome. So, now let's add a minify CSS file. For this task we need to take a slightly different approach than before, we'll need to use the gulp-clean-css package and the source maps and rename packages as well but we'll also need nodes FS module. So, this time we need to set module.exports to the response of the fs.read file method. We already have a source map for the built CSS file and with clean CSS, if we have an existing source map, we need to pass it to the module when we invoke it. But before we do that we need to read the sourcemap file and we can do that with the read file method. This method is asynchronous so we also need to pass it a call back to be executed when the file has been read, which will be passed the contents of the file. Know that we could use an error function here as well, but I find it more readable to use a traditional anonymous function. We can then use Gulp to minify the file inside our callback. So, we invoke the clean CSS module in a way that we normally invoke the Gulp modules that we're using and we can use the Sourcemap Property to tell it that we want to create a sourcemap but we're going to pass it the contents which is the contents of the existing sourcemap file which the read file callback be passed. So, we follow a similar process as when we were uglifying the JavaScript, we get the file to minify, initialize the source maps and then invoke the clean css module. As I mentioned we need to pass a configuration object to this module to configure the source map property setting into the source map that's the read file method of the FS module has read for us. We then rename the file to have a .min suffix, generate the source map and last of all, write both the minified CSS and the source map file. So, let's just make sure that it works. And we can see that the minified CSS and the minified map file have been generated for us, perfect. So, in this lesson we saw which packages we need to use to build a concatenation and minification workflow for both CSS and JavaScript in order to generate deployable assets. In the next lesson we're going to move into the final section of the course, the test section where we'll focus on adding a unit testing set up. Thanks for watching.

Back to the top