Pick our brains...

Install Grunt & SASS (plus dependencies) for an account/site on shared hosting

This is needed when Grunt and SASS plus all dependencies are not installed on a Shared host. This is pretty typical for LiquidWeb shared hosting.

Start by using SSH to log-in to the server as the relevant account.


ssh account@server.com

Install RubyGems + SASS

  1. Issue these commands to download and setup ‘RubyGems’:
    cd ~
    mkdir .gem bin lib src tmp
    cd ~/src
    wget http://production.cf.rubygems.org/rubygems/rubygems-2.4.6.tgz
    tar -xzvf rubygems-2.4.6
    cd rubygems-2.4.6
    ruby setup.rb --prefix=$HOME
    cd ~
    mv .gemrc .gemrc.bak # Note: We don't want the RC file interfering
  2. Edit ~/.bashrc and add the following then save:
    export PATH="$HOME/bin:$HOME/.gem/bin:$PATH"
    export RUBYLIB="$HOME/lib:$RUBYLIB"
    export GEM_HOME="$HOME/.gem"
    export GEM_PATH="/usr/lib/ruby/gem/1.8:$GEM_HOME"
    alias gem="nice -n19 ~/bin/gem"
  3. Issue these commands to install the SASS gem locally:
    source .bashrc # Note: This will run all the stuff you just added to .bashrc
    gem -v # Note: Should return 2.4.6
    gem install sass
    sass -v # Note: Should return Sass 3.4.13 or above

Install Node.js + NPM

  1. Issue these commands to download and compile Node.js/NPM from source:
    export TMPDIR="$HOME/tmp" # Note: Or you can add this to .bashrc
    cd ~/src
    wget http://nodejs.org/dist/node-latest.tar.gz
    tar -xvzf node-latest.tar.gz
    cd node-vX.X.X # Note: Replace the X's with the correct version path
    ./configure --prefix=$HOME
    make # Note: Be patient.. Node.js takes a VERY long time to compile (15+ mins)
    make install
  2. Check the compiled binaries are there by running these commands:
    ls ~/bin # Note: If all went well you will see a binary for both 'node' and 'npm'
    node -v # Note: This should return the Node.js version
    npm -v # Note: This should return the NPM version 

Install Grunt-CLI

  1. Run these commands to install ‘grunt-cli’ globally:
     npm install -g grunt-cli
  2. You can now type ‘grunt’ from anywhere and you should see a version displayed followed by a message/warning ‘Unable to find local grunt’. This means grunt-cli is installed.

Optional: Install and Setup ‘Grunt’ for your site

  1. Create a package.json file in your site root. Use the following template or create your own:
      "name": "YOUR SITE/APP NAME",
      "version": "1.0.0",
      "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-sass": "~0.7.2",
        "grunt-contrib-watch": "~0.5.3",
        "grunt-browser-sync": "^1.3.6",
        "grunt-stripcomments": "^0.1.0"
  2. Create a Gruntfile.js file in your site root. See the Gruntfile.template.js attached to this article that you can copy (rename to Gruntfile.js) and modify to fit your site. You’ll need to pay attention to the paths in the arrays at the top of the file.
  3. Issue these commands to get Grunt installed on your site:
    cd <site_root> # Note: Obviously set this to your site path..
    npm install # Note: Run it twice (just in case the first one partially fails)
  4. Now run grunt (as a background process) by typing:

    You should see…

    Running "watch" task
  5. Test SASS watch/compile works by editing any of the SASS files and saving. You should see something like this displayed:
    >> File "wp-content/themes/mytheme/assets/sass/main.scss" changed.
    Running "sass:dist" (sass) task
    Done, without errors.
    Completed in 10.153s at Thu Mar 19 2015 01:09:42 GMT-0400 (EDT) - Waiting...