Nathan Witt

From Zero to Gulp Plugin in No Time

November 06, 2014

Task runners are great. So many things that are tangential to the actual core problem I'm working on can be neatly abstracted away to the point where I find myself wondering, "How did I ever get anything done before!?" when I step back and notice the productivity benefit. You can gain a lot of ground relying on other people's code, but even in Node eventually you're going to find yourself in uncharted territory if you stick around long enough. That was me when I found there aren't many utilities for converting assets into data URIs out there. Using Gulp--my preferred task runner--I set out to write my first plugin. The process of transforming a stream of files turned out to be relatively painless. Just make sure you really should.

This gist is a contrivance for getting started with Gulp streams. See gulp-data-uri-stream's index.js for a complete working example.

What's happening here is we're acting on the Vinyl stream and adding some lovely decoration to the data that gets passed through. Most of the heavy lifting is done by through2, which streamifies the inner logic to work nicely with the rest of our gulp toolchain. 3rd-party plugins generally 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 transform stream.

Make sure to read Gulp's plugin authoring documentation for further detail.

Use gulp-data-uri-stream

NPM
https://www.npmjs.org/package/gulp-data-uri-stream

GitHub
https://github.com/wittnl/gulp-data-uri-stream