Keeping your front-end tool chain up-to-date : Node, NPM and Ruby

WARNING! I use a Mac so these comments and examples are from the point of view of a Mac owner.

Setting up an environment with the required dependencies can be a chore to be blunt. Here’s a rundown of the best approaches to keep these dependencies in place once they’re installed. This is not an article about installation, but what to do once they are installed and maybe a few hot items/points of interest to enhance your experience. As a FRED these days you’ll certainly run into a project that may have node or may use Ruby and knowing how to operate in these environments plus keep them updated can be a huge advantage to you or your team members.

Node

In order to run cool toys like Grunt or Bower for example, you’re gonna need node. To switch between node versions I like “n” which allows authors to install versions of node simply and quickly by typing n from the command line. Here’s what I get when I execute n from my terminal…

grayghostvisuals at GrayGhostVisualsMacBookAir.local  ~
$ n

  0.10.0
ο 0.10.5
  0.11.0
  0.11.1
  0.8.21
  0.9.6

At this point I can use the up or down arrow key (on my keyboard of course!) and choose what version of node I want to have running. This is a good to know thing because sometimes npm packages dependent on node might not work with a certain version and changin’ between them is super helpful to know. To install versions of node with n you can run n stable to get the latest stable version of node.

If you’d like to remove a certain version of node you can run the following command (using node 0.9.6 as an example)…

grayghostvisuals at GrayGhostVisualsMacBookAir.local  ~
$ n rm 0.9.6

node package manager

Node Package Manager is another one of those “Must haves.” If you want the docs for npm you can find them here. Basically npm is an online repository for the publishing of open-source Node.js projects; second, it is a command-line utility for interacting with said repository that aids in package installation, version management, and dependency management. To keep npm up to date you can always run npm update npm -g which simply updates the global installation of npm used by your system.

grayghostvisuals at GrayGhostVisualsMacBookAir.local  ~
$ npm update npm -g

npm http GET https://registry.npmjs.org/npm
npm http 200 https://registry.npmjs.org/npm
npm http GET https://registry.npmjs.org/npm/-/npm-1.2.20.tgz
npm http 200 https://registry.npmjs.org/npm/-/npm-1.2.20.tgz
npm http GET https://registry.npmjs.org/npm/1.2.20
npm http 200 https://registry.npmjs.org/npm/1.2.20
npm http GET https://registry.npmjs.org/npm/-/npm-1.2.20.tgz
npm http 200 https://registry.npmjs.org/npm/-/npm-1.2.20.tgz
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
npm@1.2.20 /usr/local/lib/node_modules/npm

Ruby

Ruby is definitely another environment you’ll encounter because Ruby is so 2013 right now and looks like it could be hot for a very long time. It’s also the language that lets us run cool stuff like Compass and Sass…just to name a few.

If you’re a smart cookie then you use rvm to help manage your gemsets and version of Ruby. The Ruby version manager, as it is called, lets authors run commands like rvm use 1.9.3 or rvm use 2.0.0 to switch between versions of Ruby quickly.

grayghostvisuals at GrayGhostVisualsMacBookAir.local  ~
$ rvm use 1.9.3
Using /Users/grayghostvisuals/.rvm/gems/ruby-1.9.3-p392

grayghostvisuals at GrayGhostVisualsMacBookAir.local  ~
$ ruby --version
ruby 1.9.3p392 (2013-02-22 revision 39386) [x86_64-darwin12.3.0]
Example for rvm use 1.9.3
grayghostvisuals at GrayGhostVisualsMacBookAir.local  ~
$ rvm use 2.0.0
Using /Users/grayghostvisuals/.rvm/gems/ruby-2.0.0-p0

grayghostvisuals at GrayGhostVisualsMacBookAir.local  ~
$ ruby --version
ruby 2.0.0p0 (2013-02-24 revision 39474) [x86_64-darwin12.3.0]
Example for rvm use 2.0.0

Now that you can switch between Ruby versions you’ll also want to keep rvm up to date. To upgrade to the most stable version of rvm use the rvm get stable command like so:

grayghostvisuals at GrayGhostVisualsMacBookAir.local  ~
$ rvm get stable
######################################################################## 100.0%
Downloading RVM from wayneeseguin branch stable
% Total    % Received % Xferd  Average Speed   Time    Time     Time    Current
                             Dload  Upload   Total   Spent    Left      Speed
100   124  100   124    0     0    394      0 --:--:-- --:--:-- --:--:--   512
100 1062k  100 1062k    0     0   432k      0  0:00:02  0:00:02 --:--:--  530k

Upgrading the RVM installation in /Users/grayghostvisuals/.rvm/
Adding rvm PATH line to /Users/grayghostvisuals/.bashrc /Users/grayghostvisuals/.zshrc.
RVM sourcing line found in /Users/grayghostvisuals/.bash_profile /Users/grayghostvisuals/.zprofile.

Upgrade Notes:

* RVM 1.20 changes default behavior of Autolibs to Enabled - if you prefer the 1.19 behavior
then run "rvm autolibs read fail", read more details: rvm help autolibs


# RVM:  Shell scripts enabling management of multiple ruby environments.
# RTFM: https://rvm.io/
# HELP: http://webchat.freenode.net/?channels=rvm (#rvm on irc.freenode.net)
# Cheatsheet: http://cheat.errtheblog.com/s/rvm
# Screencast: http://screencasts.org/episodes/how-to-use-rvm

# In case of any issues run 'rvm requirements' or read 'rvm notes'

Upgrade of RVM in /Users/grayghostvisuals/.rvm/ is complete.

# Gray Ghost Visuals,
#
#   Thank you for using RVM!
#   I sincerely hope that RVM helps to make your life easier and
#   more enjoyable!!!
#
# ~Wayne


RVM reloaded!

I’m sure you noticed the screencast link listed from the rvm update above? You should watch that immediately if you haven’t already done so!

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2013/05/12