Rik Lewis: pipe

Tuesday, 11 July 2017

Using pump instead of pipe

On thing that I quickly discovered whilst using Gulp to automate my development process, was the piping the results through from one plugin to another could often go wrong, and it was often hard to trap the reason and get proper error messaging out.

Then I discovered some example code which pointed me to pump. Pump is...

a small node module that pipes streams together and destroys all of them if one of them closes

Essentially it allows you to restructure your Gulp task in a way that handles multiple plugins much better, and it fails more gracefully.

So I needed to include a copy of the new plugin at the top of my Gulp file...

var pump = require("pump");

Then I took the task which I wrote about in my last post...

gulp.task("js",function(cb) {

browserify(jsFiles).bundle(),

.pipe(source("script.js"))

.pipe(gulp.dest("build/js"));

});

And re-wrote it to look like this...

gulp.task("js",function(cb) {

pump([

browserify(jsFiles).bundle(),

source("script.js"),

gulp.dest("build/js")

],cb);
});

As you can see, instead of using the "pipe" method to pass the files/content from one plugin to another, I am now passing an array of calls into pump and this is doing the hard work for me.

I have found that this makes the error messaging much more useful when I have syntax errors or plugins fail to work as expected. It's certainly saving me a lot of time when it comes to debugging and fixing my Gulp file.

Sunday, 9 July 2017

First Gulp task - concatenation

I recently started using a new development process, using Gulp to automate development tasks. I thought I'd start off easy, so I'd concatenate my existing javascript files into a single file.

You might ask, why would you want to do this? And my answer would be, you want to reduce the number of items fetched when loading your page, for optimal performance.

You might ask, why don't you do this manually once and then always work on the concatenated file? And my answer would be, some of the files are plugins or libraries, which I want to keep separate so that I can easily update them. I only want them to be combined in the build version.

So, questions out of the way, here's how it went down.

Firstly, you need to make sure you include the relevant bits at the top of your Gulp file. I included 3 to start with...

var gulp = require("gulp");

var util = require("gulp-util");

var concat = require("gulp-concat");

Gulp and gulp-util are essentially your basics, needed in every Gulp file. I then found gulp-concat on NPM (Node Package Manager, regardless of what the top left corner of the site says!) and it looked like it would do the trick, so I included that too.

This is one of the big advantages to Gulp. Because it runs in Node, you can use NPM to find and install packages, which allows you to maximise the code not written, but using some that someone else has written for you!

So now I create a simple Gulp task...

gulp.task("js",function(cb) {

gulp.src(jsFiles)

.pipe(concat("script.js"))

.pipe(gulp.dest("build/js"));

});

I'd recommend reading up more on Gulp, but essentially this is taking an array of filenames stored in "jsFiles" and using it as the source, piping this through to the gulp-concat plugin which takes a parameter to name the resultant output file, and then setting the destination to be my build directory. When I run this, it sucks in all the files, concatenates them, and then spits out a single file to my build directory.

I then modified the HTML so that instead of linking to lots of different javascript files in the <head> tag, I now reference just one javascript file, and I also do it at the end of the <body>. I've also added a "defer" attribute, because it really doesn't need to be loaded upfront - this reduces the time till the First Meaningful Paint.