Grunt with the Effort

I was tasked to find a good service to concatenate/minify our javascript and css files.  Of course, I’d heard of these words before, but never actually used the techniques.  My other major project involved some very old practices, including inserting php directly into a css file (and rarely, a js file), so minifying would absolutely not work.

But I’d heard of a couple- Gulp and Grunt for example- so I took on the project.  I checked out Grunt first, for that time-honored reason: the alphabet.

And it’s awesome.  It was a little intimidating at first, but after going through the initial setup (pretty easy with npm) and taking a little bit to learn about the two core files (package.json and the gruntfile), I found it to be really friendly to work with.  After all, it’s really just a bunch of javascript, and I like working with that!

The stumbling would come later, when I realized that our new project was built in Angular JS by many different developers.  With no current js or css style guide, I started to run into trouble.  The minifier doesn’t like Angular’s syntax on some things, particularly templateUrl within a directive, but setting the ‘mangle’ config option to false seemed to help.

Minifying was working, but concatenating is still not.  There are errors or unclosed tags somewhere in a directive (not written by me!  I never make mistakes- really boss!).  Somehow, they work in a full sized file, but it does not survive the minification process.  So now it’s time to check each directive, and each template html file to see where we’ve gone astray.  Not looking forward to that.

Speaking of things I’m not looking forward to: we’re trying to push the latest version of the Angular-Django app from our local machine (running the default Django dev server- where it runs perfectly) to the remove dev testing server (where it doesn’t run at all).  This also looks to be an issue with Angular- the templateUrl isn’t getting the right path, which is throwing a very unhelpful error in the console and blocking almost everything from loading.  I know hunting bugs is a major part of the job, but it might be my least favorite.

It has, however, convinced me of the need for a style guide.  It’s not really up to me, but it will be suggested at our next meeting.  There are plenty of good ones out there to emulate (copy).


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s