WP Development Workflow First-Time Setup

I really enjoyed Carrie and Mika on the WP Development Workflow webinar series.  Unfortunately though, my Macbook Pro was not feeling the nerd love that I was.   I had several bumps in the road attempting to set up Node.js, Bower, Grunt and SASS.  That said, I did eventually get everything working and thought I’d share a step-by-step list that others might find helpful.

  1. Node.js – I downloaded the latest version via an OS X install package from the web site .  The first go-round I also installed Homebrew but realized I didn’t need both.
  2. npm – Per the webinar instructions, in Terminal I  navigated to the Utility Pro project folder and ran: npm install. (Remember, this is because it needs the content of that package.json file to know what to run.) This will take awhile as it’s going to load a LOT of files. You might get some warning messages about some version of this or that being deprecated and you should get a new version — I found you can ignore these. Since they are warnings, it will continue with the script and in the end I didn’t have to update anything to get this working.
  3. Bower – Per the next instructions, I tried to run npm install -g bower and received many Permission Denied errors. FYI, the -g means you are installing for global access, meaning it can be accessed from any directory on your machine. To get that to work you need to execute the command as an administrator, or sudo. I re-ran the command but placed sudo in front: sudo npm install -g bower , it prompted for my password (for my Mac), I entered it and it completed successfully.

    If you’ve never done this its a little weird in that while you’re typing your password, the cursor doesn’t move, but it is recording your keystrokes so never fear, press enter when done entering your password and it will continue.

  4. Grunt – Now is the big moment!  Time to finally run Grunt….I type it in and alas I get the error message -bash grunt: command not found  Argh! I started Googling and some posts said to make sure everything is up-to-date and provided a command to do that: sudo npm update -g npm . This appeared to run OK but at the end it had several messages that started with npm WARN EBUNDLEOVERRIDE Replacing bundled npm > -some package- with new installed version. Well, this set of warning messages were not OK to ignore.  So, bottom line:  DO NOT DO THE UPDATE.  So what now?  I Google’d some more about my original command-not-found error and ended up at the Getting Started link for Grunt.  This talked about installing the Grunt CLI (command line interface) globally (need to use sudo) which means it will put the grunt command in your system path, thus allowing it to be run from any location.  Remember, Grunt is package/project specific so you may have that installed in any number of sites.  NOW this was starting to make more sense.   The command to enter is: sudo npm install -g grunt-cli
  5. Sass – So after I installed the Grunt CLI, I typed grunt at the command line and it was doing something, yay! It said something about Bower components and that it re-created the file “style-rtl.css”. Then it said Running "sass:dist" (sass) and it aborted from warnings: Warning: You need to have Ruby and Sass installed and in your PATH for this task to work. More info: https//github.com/gruntjs/grunt-contrib-sass USE -- force to continue. Oh brother, more files missing 🙁 but never fear, you’re almost there! Next step, use the link in the error message which took me to a github README.md file. In there under the SASS heading it repeated — you have to have Ruby and SASS installed for this to run. Well since I’m on a fairly recent Mac, it’s going to have Ruby but I made sure by entering ruby -v in terminal and that checked out. You need that so you can do the next, and final (I promise) task to run which is installing SASS. Funny considering all this was to use that in first place 🙂  So back in terminal, with sudo (your password) enter sudo gem install sass and that to load SASS and you are done. Now go back and enter grunt it will list any partial files that changed, mention that its re-generating new style-rtl.css and style.css files, and it will end with “Waiting…” now you are golden!

screen shot of a successful grunt run