Teaching myself how to use NPM on a local project – Part Two

NPM is great for installing and managing packages in your local projects, but the real magic happens when you get into task runners.  The two most popular task runners are Grunt and Gulp.  I chose to use Gulp as it just seemed to be a little more modern and a little more popular, but everything I read about Grunt made the decision a tough one.

Anyway, adding Gulp to my development workflow has been really fun and it is super cool (at least for us coder nerds).  The first things I did was created a Source directory and I called it /src/.  Within this directory, I created a /css/ and /js/ directory.  Within both of those, I created my Vendor directory /vendor/.  In this Vendor directory I added files such as Bootstrap, Waypoints, Masonry, Owl Carousel, etc.  So, my directory structure looks like:

Now going forward, I will only edit files in the /src/ directory.  when I am ready, I will run a build task and all my files will get compiled, concatenated, minified, uglified, renamed, autoprefixed… and built into my /dist/ directory which more or less follows a similar structure as my /src/ directory.  I have just started to dig into all the different tasks that you can do and maybe I will get more into those details in Part Three, but for now, I am using the following gulp plugins

Below is an example task from my gulpfile.js:

In the end, I have a single file with all my css concatenated, compressed, autoprefixed, renamed to vendor.min.css.  So, I now just have to enqueue one file vs. eight.

There is a lot more that you can do and I am sure is more that I should be doing and or be doing it differently, but until I get deeper into this (webpack…), I think this stuff is pretty darn cool.