Menu icon Foundation
How To Install Grunt and Libsass on Windows

The goal of this post is to provide a simple description of how I got Grunt and Libsass up and running on Windows 7.

I've made the following assumptions that, like me, you can:

- Find the Windows Start button
- Follow simple instructions
- Have little or no idea what Git, Grunt, Bower, NodeJS, Ruby or Libsas are let alone use them

Finally, you want to take your development skills to the next level and be able to toss around words like mixins and inheritance at your next cocktail party.

Grab a beer and lets get started...

Before I began I created a directory called DevTools where I put all the components mentioned in Foundation's Getting Started With SASS documentation at http://foundation.zurb.com/docs/sass.html

C:\DevTools
\bower
\git
\grunt
\nodejs
\ruby

Creating the above directory structure isn't necessary. I did it simply to organize all the tools under one place to keep things organized.

The Basics:

Before we begin you will need to use the Command Prompt to enter several commands along the way. To open the Command Prompt in Windows click [Start], type "cmd" in the search box. You will see cmd.exe at the top under programs. press [enter] - The Command Prompt window will appear.

To change directories, use the cd command. >cd\path\to\where\you\want\to\be

Close the Command Prompt window by typing "exit" (no quotes) at the prompt.

You should also know how to access and edit your Environment Path. In Windows click [Start], type "path" in the search box. You will see "Edit environment variables for your account" at the top. press [enter] and you will see your Environment Variables box.

Note that it's divided into 2 sections, User Variables and System Variables. WARNING: Before you make any changes to your environment path it is HIGHLY recommended that you copy and paste your path into Note Pad and save it.

To edit a path scroll to the "Path" variable and press Edit... a small window will appear with the entire path highlighted. Press Ctrl + c to copy the entire path. Open Note Pad and press Ctrl + v to paste it. Save and close Note Pad. Now you can safely make changes if needed.

Environment paths can be quite long. To move to the beginning or end of the path, click inside the highlighted area to remove the highlight then press either the HOME or END key on your keyboard.

Note: For any changes you make to your environment path, you will need to close then reopen the Command Prompt box for the changes to take effect.

Close the Environment path box.

OK? Let the fun begin!

1) Install Ruby 1.9.3 or 2.x from https://www.ruby-lang.org/en/installation/

This is a straight forward install and should pose no problems.

2) Be sure that Ruby appears in your Windows environment path. Access the Path as outlined above.
You should see something like "...\;C:\path\to\ruby\bin\;" at the end of your environment path.

Note that each program path must be separated with a semi-colon ";"

3) Confirm that Ruby installed correctly. Open the Command Prompt window and type "ruby -v" at the command prompt. You should see the version number of your Ruby installation.

4) Close your Windows Command Prompt before installing NodeJS

5) Install NodeJS at http://nodejs.org/ This too is a very straight forward process. You can use all the default options. Note that Node Package Manager (npm) will also be installed as part of the NodeJs install.

6) Confirm NodeJS is installed properly.

When NodeJS installation has completed, open the Command Prompt as described above and type “node” and [enter]. You should get prompted with a “>”.

If you get an error it may mean that there is an issue with your environment path. If you are already at a Command Prompt you can open your environment path by typing "sysdm.cpl" (no quotes) [Enter].

Next, select the Advanced tab, and click the Environment Variables button. Look to see that NodeJS appears in the path. If it doesn't, add it and be sure to use a ";" to separate the NodeJS path from other program paths Like so: ... ;c:\program files (x86)\nodejs\;

or...try this in your command line..

SET PATH=C:\Program Files\Nodejs;%PATH%

Also, check to see that a path to npm appears in the User Variables section of your Environment Variables. It should be in the top window and you should see something like: PATH... C:\Users\SomeName\AppData\Roaming\npm

If you do not see a similar entry, you may have to add the path to npm manually. NodeJs adds npm to your user account \AppData\Roaming so check there for the npm directory.

Close the command prompt, reopen it and and then try running node.

If NodeJS does appear in the path (usually at the end) it may mean that there is an issue with the path that sometimes isn't obvious. First, move the NodeJS path to the beginning of the environment path.

Make sure there is a "\" at the end of the directory path. (...\nodejs\;) Be sure that a ";" separates one program path from another. Also sometimes a trailing "\" from a prior program path is the problem. Try using a double ";;" as a separator.

Remember to always close the command prompt window and reopen it after any change.

Once any environment variable issue is resolved typing "node" on the command line will get the ">" prompt.

Now at the prompt type something like “1 + 1" and [enter]. You should get 2 as a result.

Now that we have confirmed that NodeJS is installed correctly, quit NodeJS by using the keyboard and typing [ctrl]+C twice. [ctrl]+c +c

7) Install Bower

Create a folder structure similar to the following: C:\Bower\apps

The reason Bower is used is to avoid having to manage client side dependencies (css, JavaScript, etc.). We will install Bower now so that we can use it latter to manage dependencies.

We will use Node Package Manager (npm) to install Bower. Using the “-g” (global) switch we can install Bower from any directory.

8) From inside the Bower directory you created type: "npm install -g bower" (no quotes and remember that npm is case sensitive)

For me it was C:\DevTools\Bower>npm install -g bower

9) Confirm Bower is installed

Since we want to install the dependencies in the “apps” directory, we will navigate into the “apps” directory. \Bower\apps>

Next we'll do a search for jQuery.

Inside the apps directory type: "bower search jQuery" (no quotes and remember, it's case sensitive) \Bower\apps>bower search jQuery

You should see a bunch of jQuery stuff scroll down your Command Prompt window. We now know Bower is working.

** In the Reply Section below JCJ80 reported that he add to bower to his path to get it to work on his Windows 8.1 system. I'm using Windows 7 and didn't have a problem. **

Close the Command Prompt window.

10) Install Git

Go to www.git-scm.com to download Git. You can also get there from Bower's website.

IMPORTANT! When installing Git BE SURE TO SELECT “Run Git from the Windows Command Prompt”. This will add Git to your environment path. DO NOT USE "Git Bash Only" radio button.

Once Git has installed check to see that it appears in your Environment Path.

11) Install Dependencies (jQuery and Underscore)

If you have the Command Prompt window open, close it.

Open a new Command Prompt and navigate inside the “app” directory that we created previously. For me it was C:\DevTools\Bower\app>

11a) Install jQuery using Bower. Remember, it’s case sensitive.

Type: "bower install jQuery" (No quotes)

11b) Now install Underscore. Remember it's case sensitive

From inside ..\bower\app> type: "bower install underscore"

12) Confirm Dependencies

There should be a new directory underneath ..\bower\app created by Bower called “bower_components” this is where jQuery and Underscore folders should have been installed.

Ok we're almost home...

Time To Install Foundation!

13) Zurb uses bower to manage the updating process of Foundation. After installing all the dependencies you need to do the following:

Type: "npm install -g bower grunt-cli" from the command prompt (no quotes).

14) Install the Foundation cli by running "gem install foundation" from the command prompt (again no quotes).

Oh! cli stands for "command line interface"... We're getting smarter already!

After the above is created, you'll use Grunt and Libsass to compile your SASS stylesheets.

15) First, create a New Project folder. Then navigate into the directory where you want all the files to be created. cd\path\to\NewProjectRootDirectory

16) Next you'll use the Foundation cli that you just installed to create all your new project files in your New Project root directory.

Type without quotes: "foundation new project_name --libsass" and watch the magic happen! Be careful to properly use the "new". It's a command and not part of project_name. Also note the two dashes before libsass.

In your New Project root, you should see a bunch of newly created files such as: .bowerrc, gitignore, bower.json, package.json, index.html, etc. There will also be a bunch of subdirectories created such as .git, bower_components, css, js, node_modules and scss.

If you see all that stuff CONGRATULATIONS! You're ALMOST there.

17) Time to Grunt

You need to use Grunt to compile everything before you start working:

From you NewProject root directory type: "grunt build"

18) To compile changes as you work type: "grunt watch"

If everything is working as it should, you'll see the following in your Command Prompt window:
Running "watch" task
Waiting...

19) To update Foundation type: "foundation update"

That's it! Go grab another beer. You earned it!

Now all I have to do is spend the next year learning everything we just installed.

Hope this helps. (if it does check the HELPFUL box! :) )

Tom

libsasswindowsSassinstallGruntrubynodejsbowergitfoundation cli

The goal of this post is to provide a simple description of how I got Grunt and Libsass up and running on Windows 7.

I've made the following assumptions that, like me, you can:

- Find the Windows Start button
- Follow simple instructions
- Have little or no idea what Git, Grunt, Bower, NodeJS, Ruby or Libsas are let alone use them

Finally, you want to take your development skills to the next level and be able to toss around words like mixins and inheritance at your next cocktail party.

Grab a beer and lets get started...

Before I began I created a directory called DevTools where I put all the components mentioned in Foundation's Getting Started With SASS documentation at http://foundation.zurb.com/docs/sass.html

C:\DevTools
\bower
\git
\grunt
\nodejs
\ruby

Creating the above directory structure isn't necessary. I did it simply to organize all the tools under one place to keep things organized.

The Basics:

Before we begin you will need to use the Command Prompt to enter several commands along the way. To open the Command Prompt in Windows click [Start], type "cmd" in the search box. You will see cmd.exe at the top under programs. press [enter] - The Command Prompt window will appear.

To change directories, use the cd command. >cd\path\to\where\you\want\to\be

Close the Command Prompt window by typing "exit" (no quotes) at the prompt.

You should also know how to access and edit your Environment Path. In Windows click [Start], type "path" in the search box. You will see "Edit environment variables for your account" at the top. press [enter] and you will see your Environment Variables box.

Note that it's divided into 2 sections, User Variables and System Variables. WARNING: Before you make any changes to your environment path it is HIGHLY recommended that you copy and paste your path into Note Pad and save it.

To edit a path scroll to the "Path" variable and press Edit... a small window will appear with the entire path highlighted. Press Ctrl + c to copy the entire path. Open Note Pad and press Ctrl + v to paste it. Save and close Note Pad. Now you can safely make changes if needed.

Environment paths can be quite long. To move to the beginning or end of the path, click inside the highlighted area to remove the highlight then press either the HOME or END key on your keyboard.

Note: For any changes you make to your environment path, you will need to close then reopen the Command Prompt box for the changes to take effect.

Close the Environment path box.

OK? Let the fun begin!

1) Install Ruby 1.9.3 or 2.x from https://www.ruby-lang.org/en/installation/

This is a straight forward install and should pose no problems.

2) Be sure that Ruby appears in your Windows environment path. Access the Path as outlined above.
You should see something like "...\;C:\path\to\ruby\bin\;" at the end of your environment path.

Note that each program path must be separated with a semi-colon ";"

3) Confirm that Ruby installed correctly. Open the Command Prompt window and type "ruby -v" at the command prompt. You should see the version number of your Ruby installation.

4) Close your Windows Command Prompt before installing NodeJS

5) Install NodeJS at http://nodejs.org/ This too is a very straight forward process. You can use all the default options. Note that Node Package Manager (npm) will also be installed as part of the NodeJs install.

6) Confirm NodeJS is installed properly.

When NodeJS installation has completed, open the Command Prompt as described above and type “node” and [enter]. You should get prompted with a “>”.

If you get an error it may mean that there is an issue with your environment path. If you are already at a Command Prompt you can open your environment path by typing "sysdm.cpl" (no quotes) [Enter].

Next, select the Advanced tab, and click the Environment Variables button. Look to see that NodeJS appears in the path. If it doesn't, add it and be sure to use a ";" to separate the NodeJS path from other program paths Like so: ... ;c:\program files (x86)\nodejs\;

or...try this in your command line..

SET PATH=C:\Program Files\Nodejs;%PATH%

Also, check to see that a path to npm appears in the User Variables section of your Environment Variables. It should be in the top window and you should see something like: PATH... C:\Users\SomeName\AppData\Roaming\npm

If you do not see a similar entry, you may have to add the path to npm manually. NodeJs adds npm to your user account \AppData\Roaming so check there for the npm directory.

Close the command prompt, reopen it and and then try running node.

If NodeJS does appear in the path (usually at the end) it may mean that there is an issue with the path that sometimes isn't obvious. First, move the NodeJS path to the beginning of the environment path.

Make sure there is a "\" at the end of the directory path. (...\nodejs\;) Be sure that a ";" separates one program path from another. Also sometimes a trailing "\" from a prior program path is the problem. Try using a double ";;" as a separator.

Remember to always close the command prompt window and reopen it after any change.

Once any environment variable issue is resolved typing "node" on the command line will get the ">" prompt.

Now at the prompt type something like “1 + 1" and [enter]. You should get 2 as a result.

Now that we have confirmed that NodeJS is installed correctly, quit NodeJS by using the keyboard and typing [ctrl]+C twice. [ctrl]+c +c

7) Install Bower

Create a folder structure similar to the following: C:\Bower\apps

The reason Bower is used is to avoid having to manage client side dependencies (css, JavaScript, etc.). We will install Bower now so that we can use it latter to manage dependencies.

We will use Node Package Manager (npm) to install Bower. Using the “-g” (global) switch we can install Bower from any directory.

8) From inside the Bower directory you created type: "npm install -g bower" (no quotes and remember that npm is case sensitive)

For me it was C:\DevTools\Bower>npm install -g bower

9) Confirm Bower is installed

Since we want to install the dependencies in the “apps” directory, we will navigate into the “apps” directory. \Bower\apps>

Next we'll do a search for jQuery.

Inside the apps directory type: "bower search jQuery" (no quotes and remember, it's case sensitive) \Bower\apps>bower search jQuery

You should see a bunch of jQuery stuff scroll down your Command Prompt window. We now know Bower is working.

** In the Reply Section below JCJ80 reported that he add to bower to his path to get it to work on his Windows 8.1 system. I'm using Windows 7 and didn't have a problem. **

Close the Command Prompt window.

10) Install Git

Go to www.git-scm.com to download Git. You can also get there from Bower's website.

IMPORTANT! When installing Git BE SURE TO SELECT “Run Git from the Windows Command Prompt”. This will add Git to your environment path. DO NOT USE "Git Bash Only" radio button.

Once Git has installed check to see that it appears in your Environment Path.

11) Install Dependencies (jQuery and Underscore)

If you have the Command Prompt window open, close it.

Open a new Command Prompt and navigate inside the “app” directory that we created previously. For me it was C:\DevTools\Bower\app>

11a) Install jQuery using Bower. Remember, it’s case sensitive.

Type: "bower install jQuery" (No quotes)

11b) Now install Underscore. Remember it's case sensitive

From inside ..\bower\app> type: "bower install underscore"

12) Confirm Dependencies

There should be a new directory underneath ..\bower\app created by Bower called “bower_components” this is where jQuery and Underscore folders should have been installed.

Ok we're almost home...

Time To Install Foundation!

13) Zurb uses bower to manage the updating process of Foundation. After installing all the dependencies you need to do the following:

Type: "npm install -g bower grunt-cli" from the command prompt (no quotes).

14) Install the Foundation cli by running "gem install foundation" from the command prompt (again no quotes).

Oh! cli stands for "command line interface"... We're getting smarter already!

After the above is created, you'll use Grunt and Libsass to compile your SASS stylesheets.

15) First, create a New Project folder. Then navigate into the directory where you want all the files to be created. cd\path\to\NewProjectRootDirectory

16) Next you'll use the Foundation cli that you just installed to create all your new project files in your New Project root directory.

Type without quotes: "foundation new project_name --libsass" and watch the magic happen! Be careful to properly use the "new". It's a command and not part of project_name. Also note the two dashes before libsass.

In your New Project root, you should see a bunch of newly created files such as: .bowerrc, gitignore, bower.json, package.json, index.html, etc. There will also be a bunch of subdirectories created such as .git, bower_components, css, js, node_modules and scss.

If you see all that stuff CONGRATULATIONS! You're ALMOST there.

17) Time to Grunt

You need to use Grunt to compile everything before you start working:

From you NewProject root directory type: "grunt build"

18) To compile changes as you work type: "grunt watch"

If everything is working as it should, you'll see the following in your Command Prompt window:
Running "watch" task
Waiting...

19) To update Foundation type: "foundation update"

That's it! Go grab another beer. You earned it!

Now all I have to do is spend the next year learning everything we just installed.

Hope this helps. (if it does check the HELPFUL box! :) )

Tom

Rafi Benkual over 4 years ago

Tom - great tutorial!! This is really helpful! Thanks!

Allan Kendall over 4 years ago

Good tutorial there mate and following our conversations about getting Foundation 5 running in Windows this is a welcome piece of documentation.

Philippe Delberghe / AmaZili over 4 years ago

Excellent topic, we, at AmaZili use foundation for a while with modx CMS, it took us a while to manage our directory structure /assets/templates/js /css /images we were used to work with as off foundation rev 4 .
We would have appreciated to find such a tutorial ealier to save time.

Thanks

http://amazili-communication.com

Ron Willems over 4 years ago

Tom... My sincere compliments. Great tutorial.
Yesterday I spend hours to figure this out by myself. But there are still issues I don't grasp.
I think I should leave the bower_components folder untouched. Can you tell me your opinion ?

Your tutorial
See Step 11
Why do you install jquery and underscore at this point?

I really appreciate your help. ;-)

Greetz from the netherlands

Ron

Tom Hogan over 4 years ago

Ron,

I'm glad you found the tutorial helpful!

You should certainly leave the bower_components folder as it is since Zurb uses Bower (and the components you installed) to update Foundation. In fact I just updated Foundation to 5.2.3 using the bower update foundation command. If you were to delete or move Bower and/or its subdirectories I'm sure bad things will happen ;)

As for your second question regarding the installation of jQuery and underscore at step 11, I guess my answers is that it seemed like the logical point to do it.

You install Bower using Node.js/npm and Bower runs over Git so... npm--> Bower--> Git--> bower_components.

Tom

Pam Richmond over 4 years ago

Wish I had found this earlier. Great step-by-step guide. This should be included in the docs.

Why does jQuery need to be added manually? I just created a new project, and it is already installed. On a related note, why is Underscore required?

Alexandra Toma about 4 years ago

I literally just made an account just to say thank you for this! After about 6 hours of fiddling around with Foundation and Sass on Windows I stumbled upon your tutorial. Everything was set up in 30 minutes after that.

Cheers!

JCJ80 about 4 years ago

Just going through the steps and got to installing bower. I am doing this on Windows 8, but it appears that Bower is installed in the Roaming folder in Users.

Had to add the path to the bower command in the Environment path.

Might be helpful to anyone who got a little stuck like me and is doubting their ability to follow well laid out instructions :-)

Marc Pirard about 4 years ago

Tom,

Thanks for your tutorial. Everything worked alright until n°17 "Time to Grunt". I get the error : "Fatal error: Unable to find local grunt".

I am using Windows XP. Bower and grunt have not been installed in their respective directories where i ran the npm (devtools\bower and \grunt) but in "C:\Documents and Settings\Administrateur\Application Data\npm\npm_modules".

So, as I don't quite understand what I am doing (in fact, nothing), I am stuck.

Could you give me a hand?

Thanks,

Marc

Tom Hogan about 4 years ago

Hi Marc,

Sorry to hear you're having problems.

The first thing you may want to double check is that the applications all made it into your environment path. Under environment variables you should see two windows. The top is labeled User Variables and the bottom System Variables.

The top window should have a PATH variable and the VALUE will be the path to your npm directory.
Mine is in ......\AppData\Roaming\npm

The bottom System Variables window should have a Path variable that includes the path to your Ruby, NodeJs and Git programs.

Node Package Manager (npm) is installed automatically as part of NodeJs and on my Windows 7 system it installed under ../User/MyName/AppData/Roaming. XP might be slightly different but it shouldn't matter as long as your system can find it. Under the npm directory should be a node_modules directory with bower and grunt-cli installed underneath. So it sounds like your ok there.

Double check your environment paths and let me know if they're ok.

Marc Pirard about 4 years ago

Thanks very much Tom,

I checked the path variables. They are exactly as they should. The npm in user path, ruby, node and git in system... I also tryed to reboot but no change.

The error message:
>grunt build
grunt-cli: the grunt command line interface. (v0.1.13)

Fatal error: Unable to find te local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
has'nt been installed localy on your project. For more info...

Marc

Tom Hogan about 4 years ago

Marc,

Do you recall if you used the -g (global command) when installing Grunt in step 13? It sounds as if you're not able to run Grunt from any directory. You may simply need to re-run step 13. Also re-check steps 15 and 16.

You should see grunt files in the node_modules directory under the root directory of your new project as well as a gruntfile.js in the root directory itself.

Let me know.

Tom

Marc Pirard about 4 years ago

I did it and it's working! Thank you very much Tom.

Tom Huben about 4 years ago

I am having issues at this point - step 7

I do this C:\DevTools\Bower>npm install -g bower and then see nothing is these dirs?

maybe install was pushed into roaming? anyway to clear and redo the bower step

regardless of all that... i did do all the installing etc

i get this when creating a new project...

Installing dependencies with bower...
run npm install from "./newproject"
npm WARN package.json foundation-libsass-template@0.0.1 No repository field.

Tom Hogan about 4 years ago

I don't think the warning is anything to worry about. I believe it's just telling you the package.json file should have a repository field that tells you where the code is located.

Something like.....

"repository": {
"type": "git",
"url": "git://github.com/some_name/foundation_repository.git"
}

Tom

Dave Wood about 4 years ago

Hi Tom brilliant read, cleared up a lot of ?? i had. Can i just ask did you use rails installer for ruby?

Swaranan Singha Barman almost 4 years ago

really nice article helped me a lot .because compass and sass now working with me new foundation

JD Sebastian almost 4 years ago

I too am a fan of this page and your helpful tutorial, six hours into this, most of the time spent trying to overcome the challenge I see others have had with step 17, unable to find grunt file. I have carefully reviewed your answers and tried them, but still get the same error.

I am on Windows 7 64bit, have both Mcgafee Antivirus and Malwarebytes Pro running (if you think that could make a difference--they haven't given me any problems except when trying to install an ftp client). I have run step 13-17 twice, all went smoothly until 17.

Here are my two paths:

Personal Path
C:\program files\nodejs\node.exe;C:\Ruby193\bin;C:\Users\ntcuser\AppData\Roaming\npm;C:\git\cmd\git.exe

System Path:
%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Novell\GroupWise;C:\Program Files\Intel\WiFi\bin\;C:\Program Files (x86)\Common Files\Roxio Shared\DLLShared\;C:\Program Files (x86)\Common Files\Roxio Shared\OEM\DLLShared\;C:\Program Files (x86)\Common Files\Roxio Shared\OEM\DLLShared\;C:\Program Files (x86)\Common Files\Roxio Shared\OEM\12.0\DLLShared\;C:\Program Files (x86)\Roxio\OEM\AudioCore\;C:\Program Files\nodejs\;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Git\cmd;C:\Ruby193\bin

Thanks, Tom, if you can think of anything that might help me get up and running with Foundation SASS... JD

Beluga almost 4 years ago

Ran into this:

gem install foundation
ERROR: Could not find a valid gem 'foundation' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/latest_specs.4.8.gz)

This solved it:
http://stackoverflow.com/a/27298259

Emerson Lima over 3 years ago

Great tutorial!!! It's very helpful.
Please consider to review the following items:

1 - the last version of NodeJS is not working correct, it gets a TIMEOUT on the step 16 while creating a new foundation project. I used the nodeJS version 0.10.9.
2 - in the step 7 the line "Create a folder structure similar to the following: C:\Bower\apps", needs a review about the correct directory.