Tag Archives: data uri

From Zero to Gulp Plugin in No Time

Task run­ners are great. So many things that are tan­gen­tial to the actual core prob­lem I’m work­ing on can be neatly abstracted away to the point where I find myself won­der­ing, “How did I ever get any­thing done before!?” when I step back and notice the pro­duc­tiv­ity ben­e­fit. You can gain a lot of ground rely­ing on other people’s code, but even in Node even­tu­ally you’re going to find your­self in uncharted ter­ri­tory if you stick around long enough. That was me when I found there aren’t many util­i­ties for con­vert­ing assets into data URIs out there. Using Gulp–my pre­ferred task runner–I set out to write my first plu­gin. The process of trans­form­ing a stream of files turned out to be rel­a­tively pain­less. Just make sure you really should.

This gist is a con­trivance for get­ting started with Gulp streams. See gulp-data-uri-stream’s index.js for a com­plete work­ing example.

What’s hap­pen­ing here is we’re act­ing on the Vinyl stream and adding some lovely dec­o­ra­tion to the data that gets passed through. Most of the heavy lift­ing is done by through2, which stream­i­fies the inner logic to work nicely with the rest of our gulp tool­chain. 3rd-party plu­g­ins gen­er­ally exist to take data from some point in a stream after gulp.src() and write back out before gulp.dest() is called. This is what’s called a trans­form stream.

Make sure to read Gulp’s plu­gin author­ing doc­u­men­ta­tion for fur­ther detail.

Use gulp-data-uri-stream