Gulp it down- tastes great!

Automation and task management.  There was a time, I’m told, when these terms were the domain of the devops team alone.  A lowly javascript developer didn’t have to know how to automate tasks- we were just supposed to write setTimeouts and jQuery and try not to overload the browser with DOM repaints.

But times change.  React and Angular and all the frontend frameworks made it easier to create awesome online experiences- but came with a price.  Setup has become a real chore in the frontend world.  Gone are the days when dropping your script tags at the bottom of your html file was best practice.  This is the time of bundlers and task runners and module management systems.

So, a while back, I dipped my toes in Grunt (I know, I’m way behind the curve) and liked it.  It’s basically just a big config file- you can import and use different tools (grunt-uglify, grunt-concat, etc) to minify your code as well.  Worked great, but I’ve always been more a fan of writing functions than just passing config options- so I heard Gulp might be a better choice.

And so far, it’s pretty nice.  The project I’m working on uses an Angular 2 frontend on a .net backend (sqlserver database).  I do a bit of work on both, but some of the team only works in Angular 2.  Some of them won’t use Visual Studio either, so I tried to come up with a way they could continue to work on the front end without needing the backend at all.

My (probably wildly inefficient) answer was to have a couple localOnly versions of the Angular 2 services dealing with the backend (just 2 right now).  They just use mock data (stored in simple json objects that match the structure of the actual database) and return the same format as the actual functions (so we don’t have to update every component that calls them).

Works great- but how to make sure the localOnly files are used locally, but the ‘real’ ones stay on the full project?  A Gulp library provides the way!  gulp-rename makes it super simple to rename and move files.  So, when a frontend worker updates their project from SVN, they just run ‘gulp frontendify’ afterward- it handles the file renaming/movement and we are good to go!

I know- it’s a really small start, but it works, so I’m happy for now.  And the best answer is probably the new hotness: containers.  Each worker just runs the same container and all dev/production environments are uniform.  I’ve started researching Docker and it’s very cool- but it’s also very powerful and a bit complicated, so I have a lot of work to do!

I know we like to take sides and have battles.  Grunt vs Gulp vs NPM scripts vs Docker – but the real answer is that most of them work just fine.  Pick one you like and go with it.  Worst case: you’ll have to learn something new a little way down the road.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s