This post could also be titled “How an update to the Github app combined with a change to how my project compiles Sass rendered me incapable of committing my code.”
The last time I wrote about using Sass in my WordPress theme, I was still using a Brackets plugin to compile it into CSS. I was restricted in what I could do, because the Brackets SASS plugin uses libsass, a C/C++ implementation of Sass, which natively runs on Ruby. The advantage here is that I didn’t need to install Ruby or the Sass gem to compile my code; the disadvantage is that it is not up to date with the current version of Sass, and that includes the multiple assignment usage of the @each directive.
Well, I decided that I wanted to run the latest and greatest version of Sass, and that meant installing Ruby. I won’t walk you through the installation process — Sass’s install page can help you better than I can for that.
Once I had Sass installed, I had to figure out how to compile my code into CSS. I also had JavaScript that needed minifying — for which up until this point I had been using another Brackets plugin called Minifier, but having to hit Ctrl+M on every save was pretty tedious — so my thoughts turned to another project I’d only thus far heard about: Grunt. Grunt is a task runner, something that would run in the background and, with the right plugins installed, could watch both my Sass files and my JavaScript files, compiling and minifying them as soon as they were saved. Being totally new to all this, this article proved invaluable to getting me started.
A conflict of interest
To make the code for Cover publicly accessible, I use Github. I primarily run Windows, so I installed Github for Windows. Now, it just so happened that I made the change from using Brackets plugins to using Grunt on the same day that the app updated to version 2. I hadn’t fired up the app in a while, as I was still putting together all the pieces of using Grunt and its plugins (in case you’re wondering, I use grunt-contrib-sass for Sass, grunt-contrib-uglify to minify my JavaScript, and grunt-contrib-watch to bring it all together). Once I was done, I fired up the app. The first thing I saw was that there was an update available, so I hit the update button and the app restarted. It was then that things went south.
When the Github app restarted, it took forever to load up. When it finally did, I was greeted with this:
I assumed it was something wrong with the app itself, not with my project. After all, Grunt was running fine and compiling what I wanted it to compile. It couldn’t possibly be anything in my code. Could it?
As it turned out, it was. You see, when you install Grunt, it’s on a per-project basis. And Grunt sets up a directory structure inside each project, starting with the top-level directory of /node_modules. I have since discovered that it’s generally a good idea not to commit that into git. So I added this to my .gitignore file:
node_modules/
Since making that change, the Github app has behaved wonderfully since.
Leave a Reply