#gulpjs

Embarking on this project, I wanted to build something that had a similar feeling to  the Facebook React Boilerplate setup but for vanilla HTML/CSS/JS sites (like Github Pages).  Like the React Boilerplate, I wanted the Snazzie Generator to initialize projects quickly and involve minimal configuration out of the box but allowed the user to customize their projects as they wished.

Although I the original Snazzie was working fine with some user configuration, it was a far cry from what the React Boilerplate did.  This comes from the history of Snazzie itself, as I was (admittedly) hazy on what NPM “was” and what tools were out there to help me.  Let me explain.

Quite awhile back, I had tried building an NPM package in hopes that I would be able to build the Snazzie Generator, but I was really confused as to what I’d need to do to build a scaffold from the command line.  Would I have to write exported functions that build directories?  What about subdirectories in those directories?  How would I make the basic files with all the gulp functions I’d need?  (Yes, I really thought I’d have to write all of that.)  It was all so much to consider that I got overwhelmed  and then I abandoned Snazzie for well over a year.  

Although my confusion and project abandonment wasn’t the high point of this for me, I’m glad that all that time ago I had taken the time to learn the basic concepts of publishing packages with NPM, as a year and change later I was now able to understand concepts that I was previously struggling with and it was WAY easier the second time around (more on this in a second).

Like I was saying before with the React Boilerplate, I knew that there had to be other people who had solved this “lets make a scaffold” problem and I could probably use their tools for my project. I did some googling around and stumbled upon Slush, which was the EXACT tool that I was looking for.  For those not familiar with it, Slush is a scaffolding system (described as an alternative to Yeoman) that relies on tasks similarly to how one would use Gulp in any of their other projects.

In my opinion, a slushfile is a fancier version of a gulpfile- which makes this tool really easy to pick up if you’re a Gulp enthusiast.  After installing Slush globally, making a new repository for my project, reading a bit on how to use Slush and trying a few things out, I realized that I could add all the files that I needed into the templates directory in my new Slushy project and have a bona-fide scaffolding generator that could be reused over and over.  Victory was mine!

Next, I was presented the problem of how to make this tool easy for other people to use- which is where my previous struggle with grasping the concept of what NPM “was” (as it was preparing me for what I was going to be doing today).

I started by taking a deep breath, going back to the NPM documentation, and reviewing what a NPM module was and how to publish packages.  First things first.

This is where the dawn slowly came to my apartment.  Although I had a high level overview of NPM packages, I had missed a key concept that the NPM documentation had pointed out- that anything could be published as an NPM package as long as it had a pacakge.json file.  Read that again.  Anything could be published as an NPM package as long as it had a pacakge.json file.  

My repository publishing world was turned upside down.  A great majority of my GitHub repositories had package.json files..  and thus they could ALL be published as NPM packages.  All of them.  Like tens of them.  All of those github repositories were just “unpublished packages”.  My confusion as to what NPM “was” now eliminated.

You see, when I had originally tried building Snazzie, I couldn’t wrap around my head what one of my friends had told me about NPM.  NPM is just another way of publishing open source projects (but for node.js).  Read that again slowly and let it sink in.  Not so mind bending, eh?  

In my mind NPM had a totally different feeling and thus use compared to GitHub.  To me, NPM packages were focused, small, and usually used in conjunction with larger projects while GitHub seemed like the mamajama of anything built on the internet.  What I had discovered while building the Snazzie Generator is that Github is more like reading the newspaper where you get a little bit of everything, while NPM is more like reading a magazine on your favorite topic.  The subject you’re reading about may be covered in both the newspaper and the magazine, but the magazine wouldn’t have such a broad spectrum of topics in it.  This is the key concept of NPM- its a focused open source platform.

Overall, building the Snazzie Generator has been a wonderful learning project for me for a few reasons.  First, I finally locked in the concept of the usefulness of NPM and I’m excited to use it more for things that I want to use in multiple projects.  Next, I did not reinvent the wheel.  Instead, I found tools that helped me build what I was once convinced that I’d have to start from scratch (and they were really easy to get the hang of).  Lastly, and most importantly, I got to build a tool that I and anyone else could use over and over.  All three are winners in my book.