Why a well put together Gulp file means everything
Author: Ryan Lesson | September 9, 2016
For any beginner developers out there running a server during their development phase there seems to be a commonality of constantly shutting down the rebooting the server. The reason why this happens so often is because while a server runs it doesn’t track any new changes made. So, now this brings us to the most annoying key combo of any developer, ctrl + C, up on the arrow key, then enter. While this seems like an easy combo image doing that over and over and over again during the development lifecycle to see what changes were made on the screen. This process can become very irritating over!
A solution for this is to use a task runner. While I’ve been using Grunt during my development cycle, I decided to switch it up for my next project and use Gulp. Right off the back a Gulp file just looks ascetically better than a Grunt file. Gulp to me reads more like english because it looks more like normal Javascript functions as compared to Grunt which has is own syntactical sugar. The project that I used Gulp for is a MEAN stack application. This being a project where I have to account for both the front and back end during development let’s get into how I set up my Gulp file for success.
While in the past I’ve used frameworks like Rails to help build my projects, using purely JavaScript to build this one was a little bit of a hurdle. While doing all the main things like concaving and uglifyingt my files the two things that really bulked up my Gulp file where Browser Sync and Nodemon. Let’s talk about Browser Sync first. Browser Sync is a library that allows your application to connect to a browser. While you can do a couple of different things with this the main thing that I used this library for was Live Reloads. If you aren’t familiar with what a live reload is, it is when your application detects changes and then automatically refreshes the browser without you having to type ctrl + R! This is great because just like starting and shutting down your server this process of constantly refreshing the browser can be just as irritating!
Now to deal with that dreaded shutting down and restarting the server. Enter Nodemon! What Nodemon does is monitor all server side filed on your application. Whenever Nodemon detects the a change in a file it automatically restarts the server and applies the changes to the file. Now in the Gulp file all you need to do is Nodemon to be run on the Browser Sync task and voila! You now have a strong Gulp file that will make your development life cycle a breeze because trust me. Those simple key combinations start to really build up over time.
