Category Archives: javascript

How to Gulp it Down

The intent of this article is to describe how to set up Gulp and explain the relationship between it, Node, and NPM at a non-detailed high level. I believe anything more than that may put you at risk, my dear reader, of confusion. That was certainly the case for me when I started learning this.

Let me begin with this analogy that I hope will explain why developers use it when working on a project. Using Gulp to streamline your workflow is like changing the vehicle you use to drive to your destination from a Ford Pinto to a Maserati Quattroporte.

Think of Gulp as Batman’s utility belt. Within it, there is a wide array of open source packages, or modules, or plugins that can do things like validate and compress your Javascript, remove unused CSS, enable an autoprefixer, transpile Javascript for older browsers, and compress images to name just a few. So how does one find this developers godsend?

It begins with an open source, cross-platform runtime environment called Node.js. Within this massive Javascript framework, there is a tooling library and one of its features is something called the Node Package Manager (NPM). It manages a vast repository of modules or packages that help you automate your workflow. One of them is called Gulp and associated with it are many plugins that perform time-saving tasks.

Please refer to the diagram and follow along with me to set this up on your system. For this, you will make use of your terminal and favourite text editor.

how to set up gulp

1. You will need to install both Node and Gulp on your system. Go to Node.js to get the latest version. After that, open your terminal to do the next few steps. Now install Gulp using this command, sudo npm install gulp -g. Your password will be required because this will install it globally.

2. It’s time to create the files and folders in your project directory that will work together to make Gulp work. Create a file called package.json with this command, npm init. This will take you through the steps of creating that file. You can type npm help json for the reference guide. As you may have guessed, this file will be in JSON format. Its purpose is to hold the plugins you will add to your project. More on that later.

3. Time to create another file. Type touch gulpfile.js. This is where the magic will happen. It will contain specific tasks that automate your workflow. The plugins will be imported to it from the package.json file.

4. Although Gulp is installed globally, you now need to install it into your project folder. Type npm install gulp --save-dev. You will now notice that there is a massive folder inside your project directory called node_modules. This contains all the files and dependencies that are required by any plugins you add. They will be linked to the tasks you write in gulpfile.js.

5. The bulk of the setup is complete and now we get to the heart of the matter. Since there are so many plugins, I will only use one as an example for the sake of keeping this post short. A popular one performs the task of merging multiple CSS files into one, aka SASS. All associated plugin dependencies will be downloaded into the node_modules folder and the plugins will be stored in package.json. Type npm install gulp-sass gulp-concat --save-dev. Verify this worked by looking at the new gulp plugins in your directory.

6. Finally, a task can now be written in gulpfile.js. Open this file in your text editor and create paths to the plugin’s dependencies in the node_modules folder by creating some variables.

"use strict";
const gulp = require("gulp");
const sass = require("gulp-sass");
const concat = require("gulp-concat");

Now to write the task,

gulp.task("styles", () => {
return gulp.src("./yourfolder/styles/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(concat("style.css"))
.pipe(gulp.dest("./anotherfolder/styles/")) });

To run this task, simply type gulp styles. However, to make this more convenient, a watch method can be created to make the styles task run every time a change is made to a .scss file, like so,

gulp.task("watch", () => {
gulp.watch("./yourfolder/styles/**/*.scss", ["styles"]); });
.

Phew! It may seem like a lot of setup for only one Gulp task, but the Gulp ecosystem is vast and depending on the nature of the project, each one can be tailored with its own specific set of plugins. For reference, here is a registry of close to 3000 of them. That’s a bit to swallow for an introduction to Gulp but its advantages are huge.

Give praise to all the coders who have written these helpful tools for our use.

Sorting out the sort() Method

Javascript sort() is one of four handy methods to loop through arrays. The others are map(), filter(), and reduce(), but we’ll stick to sort() for now. Of course, you can read up on it at developer.mozilla.org, but I find this doesn’t adequately give you a full understanding of how it works.

Within that article, “some ordering criterion” is mentioned. But what are they talking about? What “ordering criterion”? Sure it works, but I’ve never been satisfied with these black box explanations. If you happen to be one who is, then stop reading now.

Let’s consider a simple descending numerical array that we want to convert into an ascending one.

sort an ascending array

Pretty straightforward. But hang on. The sort() method also accepts an optional parameter in the form of a function. This can be quite useful in cases where, say, you want to alphabetically sort a list of songs but want to ignore any articles such as ‘The’ that the title may contain. A little more coding would be required, but I will stick to the simple numbered array example to illustrate further. The following code will do the exact same thing.

alternate sort method

What are a & b? Why does it return a 1 and -1? Where does it return them to? ?

All right, so as if by magic, our array is converted from descending to ascending, but how? What’s the algorithm? The fact is, every browser has its own methods for interpreting and displaying HTML on the screen. So it shouldn’t be surprising that they also have their own unique sorting algorithms. Hmm, so how does Javascript handle this?

In short, Javascript doesn’t care what algorithm each browser uses. The sort() method provides only enough information for whatever algorithm is being used. Let’s get back to my confused friend’s questions and then we will compare Chrome to Firefox.

The values a & b are any two elements within the array. I use the word ‘any’ intentionally because sort() will loop through the array and compare these two values. In doing so, there will only be 3 possible outcomes: 1. a > b, 2. a < b, and 3. a = b. Depending on the criteria you use, case 1 may return the value 1 and case 2 return the value -1. Case 3 will obviously do nothing.

The magnitude of the returned numbers is not important, only whether they are positive or negative. You can use ‘return +27’ and ‘return -14’ and it will still work. But return that value to where? It is delivered back to the sort() method because it needs that information to determine if the order of the two compared values are to be changed or not.

Let’s now have a look at how two different browsers handle their respective sorting algorithms. The numbers in red are the a & b values that the algorithm will compare. You will notice that in Chrome, the values simply switch their positions, whereas in Firefox, a single value is moved in front of the one it is being compared to.

chrome vs firefox

The Firefox algorithm seems more efficient as it is saving us 3 sorting steps in this example. But as already mentioned, the sort() method doesn’t care. It can go home happy knowing it’s sorted everything out.