Dev Diary: Node.js and Cheerio

Yesterday I was not able to finish a post due to spending most of the day in research mode. At the end of the day I ran into something very interesting and am excited to dig into it today. This post is part yesterday and today.

Yesterday

I’m attempting to get away from using regular expressions, and instead, manipulate the DOM via JavaScript. After an extensive search, Cheerio appeared and I took it for a trial run.

npm install gulp-cheerio --save-dev

It works but it’s an implementation of the jQuery core when I prefer vanilla JavaScript.

npm uninstall gulp-cheerio --save-dev

Research kept bringing me back to jsdom but it mentions it no longer supports Node.js. I ignored it, possibly a hundred times, but it kept reappearing in search results. Word is io.js is merging back with Node.js soon. I might check up on jsdom then.

Becoming frustrated, I decided to create a custom function and loop through all the images. It started off with…

var images = document.getElementsByTagName('img');

…but it never worked! Rrrrr.

That’s when I ran into this conversation and realized, when in a node environment, the document object does not exist. Oh my! I need to stop searching for Gulp plugins and spend more time understanding Node.js — and I find this very exciting!

Note: Node doesn’t have a browser to run JavaScript. The window and document objects are a browser feature.

Today

Hours into my morning and after a dozen or so articles read, I believe I have a basic understanding of Node.js. For the past few months I inadvertently googled browserify instead of my intended target browsersync. Now I know what browserify is meant to do.

Research lead me back to Cheerio. I discovered an article by Dave Ward, comparing Cheerio to jsdom, and found it invaluable. It was an old article and tweeted Dave to see if it is still relevant today.

A video from the creator of Cheerio, Matt Mueller, was helpful

And documentation on the syntax is available. So far, it looks like everything I need, plus more.

I spent time digging through the core of Cheerio and decided not to reinvent the wheel. So here I go again…

npm install gulp-cheerio --save-dev

A simple function to test Cheerio.

var cheerio = require('gulp-cheerio');

////////////////////////////////////////////////

function updateHTMLImage($) {
 var $creativeSlot = $('.creative-slot');
 $creativeSlot.addClass('please-work');
}

////////////////////////////////////////////////

gulp.task('inline-code', function(){
...
.pipe(cheerio(updateHTMLImage))
...
});

////////////////////////////////////////////////

gulp.task('build-desktop-standard', ['inline-code']);

...

And the results.

<div class="creative-slot please-work">

Looks good.

Now to focus on updating the images paths and parameters in HTML once again.

That is it for today!

Disclaimer: The Dev Diary is written every day and previous articles are not updated. Code may work today but glitches will be found tomorrow. Do your due diligence and thoroughly test any code authored here before implementing into your own project. Good luck!