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.
Install RubyGems + SASS
- Issue these commands to download and setup ‘RubyGems’:
.gem bin lib src tmp
ruby setup.rb --prefix=$HOME
# Note: We don't want the RC file interfering
- Edit ~/.bashrc and add the following then save:
"nice -n19 ~/bin/gem"
- Issue these commands to install the SASS gem locally:
# Note: This will run all the stuff you just added to .bashrc
# Note: Should return 2.4.6
# Note: Should return Sass 3.4.13 or above
Install Node.js + NPM
- Issue these commands to download and compile Node.js/NPM from source:
# Note: Or you can add this to .bashrc
# Note: Replace the X's with the correct version path
# Note: Be patient.. Node.js takes a VERY long time to compile (15+ mins)
- Check the compiled binaries are there by running these commands:
# Note: If all went well you will see a binary for both 'node' and 'npm'
# Note: This should return the Node.js version
# Note: This should return the NPM version
- Run these commands to install ‘grunt-cli’ globally:
- 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
- Create a package.json file in your site root. Use the following template or create your own:
"YOUR SITE/APP NAME"
- 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.
- Issue these commands to get Grunt installed on your site:
# Note: Obviously set this to your site path..
# Note: Run it twice (just in case the first one partially fails)
- Now run grunt (as a background process) by typing:
You should see…
- Test SASS watch/compile works by editing any of the SASS files and saving. You should see something like this displayed:
Done, without errors.
10.153s at Thu Mar 19 2015 01:09:42 GMT-0400 (EDT) - Waiting...