Optimising javascript files

In this next great installment of my new development process I want to head back to looking at javascript files, as my last three posts have been about adding stylesheets in my process, lazy loading stylesheets that are non-critical and using resource hints (although technically that last one applies to any resources, not just stylesheets).

The last time I wrote about javascript files, I had them beautifully minified and ready to go.  My gulp task for javascript files currently looks like this...

gulp.task("js",function(cb) {
  pump([
    browserify(jsFiles).bundle(),
    source("script.js"),
    buffer(),
    uglify(),
    gulp.dest("build/js")
  ],cb);
});

If you have a lot of javascript, especially with immediately-invoked function expressions (IIFEs), it can be a good idea to optimise them.  This essentially works by indicating to the browser's javascript engine during pre-parsing that it can skip this function as it can be fully parsed later, and this stops it from being parsed twice.

For more details, I would definitely recommend checking out the Github page for the plugin I'm about to talk about, which is optimize-js.  Once again, there is a thin wrapper Gulp plugin, called gulp-optimize-js.  

Side note: The naming convention isn't a coincidence, it's actually a naming convention!

Anyway, so if you've been reading this series of posts, you've probably already picked up on the pattern here.  I installed the plugin from NPM, then require it at the top of my Gulp file...

var optimize = require("gulp-optimize-js");

And then I add the relevant call into my javascript Gulp task...

gulp.task("js",function(cb) {
  pump([
    browserify(jsFiles).bundle(),
    source("script.js"),
    buffer(),
    uglify(),
    optimize(),
    gulp.dest("build/js")
  ],cb);
});

It's very important to make sure that you call this plugin after you've called gulp-uglify, because minifying the code will remove the optimisation that has been added, as technically it's done by adding additional brackets into your code.  However, these extra characters should be worth it overall.

I've tried testing with and without this optimisation on my own website, and I can't tell the difference/  The reason for this is that I don't have enough javascript code, but maybe you do.  I like knowing that my development process is as good as it can be though, even if in this case, the results are not tangible.

This plugin is covered in my Skillshare course, Optimising your website: A development workflow with Git and Gulp. The relevant video is 12 - Optimising Javascript Files.

Adding stylesheets into my Gulp file

I have been working on a series of blog post about my new development process, which so far has focused exclusively on javascript, including concatenation of javascript files, using Browserify to load jQuery and other javascript library files, and minifying (or uglifying) javascript files.  Next it's time to look at adding stylesheets.

Similar to javascript files, stylesheet files can be concatenated, in order to save round trips for individual files.  So the first place I started was copying the javascript task, rewriting it for stylesheet files, and stripping out everything but the call to gulp-concat - the same plugin can be used as it fill concatenate any files.  

gulp.task("css",function(cb) {
  pump([
    gulp.src(["css/*.css"]),
    concat("style.css"),
    gulp.dest("build/css")
  ]);
});

I think also creating a default Gulp task, in order to make it easy to call both my javascript and stylesheet tasks...

gulp.task("default",["js","css"]);

This means that when you run just "gulp" on the command line, it will automatically call the default task, which will then run through the array of related tasks - these are pre-requisites that are run first.  This list of pre-requisites can be set for any task, but is especially useful in this default mode.

Also similar to javascript files, stylesheet files can be minified (or uglified), in order to save bandwidth and download time.  However, this time a different plugin will be required, and the best I've found it called gulp-clean-css.  Like many Gulp plugins, this is actually a thin wrapper around another plugin, called clean-css.

First I added the new plugin to the top of my Gulp file...

var cleancss = require("gulp-clean-css");

And then I added the call to my stylesheet task...

gulp.task("css",function(cb) {
  pump([
    gulp.src(["css/*.css"]),
    concat("style.css"),
    cleancss(),
    gulp.dest("build/css")
  ]);
});

The script has two levels...

1. These operate on single properties only, and are mostly on by default. 
2. These operate on multiple properties at a time, including restructuring and reordering rules, but are off by default.

I have been using the default options for some time now, and these seems to serve me pretty well.  But if you want even more savings, you can play with the options, especially by activating the second level of optimisations.

These are also covered in my Skillshare course, Optimising your website: A development workflow with Git and Gulp.  The relevant videos are 15 - Concatenating Stylesheets and 16 - Minifying Stylesheets.

New Year's resolution

I don't usually do New Year's resolutions, I figure that if you want to achieve something then you should set that goal straight away, rather than arbitrarily doing it once a year.  However, it's been almost 6 months since I put up a new blog post, and that's just not acceptable!

So, my New Year's resolution is... to update this blog at least once a week.  

I've been busy in the last 6 months, very busy!  Here are a few highlights...

I've created a new website for the lovely Emma Malik - world renowned comedian.  This was a really interesting project, working on someone else's personal site, to their requirements, but putting into practise the security and performance tricks I'd learnt working on my own site, and my many years of professional experience.

I've been freelancing in my spare time on PeoplePerHour.  This has been great fun, as I love taking on new projects and solving problems, and some of the projects have already pushed me outside of my comfort zone - I love learning new things!

I've been getting into Wordpress development a lot, largely as part of the freelancing.  As an application, it's come a long way from when I'd previously looked at it, many years ago.  I'm liking it a lot, and may look at migrating this blog over, when I get more time to think through the logistics of it.

I've been working on and published my first course on Skillshare.  This is entitled Optimising your website: A development workflow with Git and Gulp, and it's based on the series of blog posts that I started to write, about my New development process with Git and Gulp and First Gulp task - concatenation.  It goes through many more steps through the process that I've built, but also, doesn't include everything.  I will be looking to create more courses to go into further detail with optimisation, and also a security-focused workflow course.  I plan to retroactively blog about each part as well, so look out for those posts over the next few weeks.  Should help me keep my resolution for January at least!

Looking forward to a productive and eventful 2018!  I hope you are too.