The Hallmanac
The Hallmanac

Life of Brian... Father | Husband | Cyclist | Software Developer

September 2016
M T W T F S S
« Apr    
 1234
567891011
12131415161718
19202122232425
2627282930  

Categories


Trouble Shooting A Gulp Install On Windows

HallmanacHallmanac

Recently I had to trouble shoot a gulp install on a Windows 7 machine. I know this topic has probably been covered ad nauseam, but since this blog is my personal little journal of stuff I encounter (among other things) I’m adding this post so that I can easily refer to it when needed.

Even though this is a trouble-shooting post, I’ll start with a basic overview of getting Gulp installed on your machine since since going back to the beginning of the process is often a trouble-shooting “technique”.

Node All The Things

Gulp is run on Node.js and is installed through NPM (a.k.a. the Node Package Manager) so, to begin with, you’ll need to install Node.js and NPM on your machine. You can do this by going to the nodejs.org website and downloading the latest version of the Windows installer. Once you’re done running the installer (you might need to reboot your machine), you can test if you successfully installed Node.js by opening up a command prompt (Windows key –> cmd) and typing in one or both of the following commands:

node -v
npm -v
Node And NPM Version

Gulp It Down

With NPM installed we can now install Gulp. You do this by running the command:

npm install gulp -g

gulp-install

With the assumption that you’ve already added a gulp build process along with a file named gulpfile.js, and you have a gulp task named “build:dev” (I know, a lot of assumptions), we can head over to our project directory and test out if gulp is installed. From the directory where your gulpfile.js lives, open a command prompt at that directory level and type in a command to run a gulp task. For example, I have a gulp task named “build:dev”. So the command line entry would look like this:

gulp build:dev

If everything is working as expected, you should see the output of your gulp task running in the command prompt. Congrats.

Crash And Burn

It doesn’t always go as planned. In the event that you’re seeing the error

'gulp' is not recognized as an internal or external command, operable program or batch file

Then you have problems. Good luck!

nothing-to-see-here


Okay, it’s not that bad.

This simply means that, when you installed gulp via NPM, for some reason it wasn’t added to your Path variable in Windows. The Path variable is an environment variable at the OS level which specifies a set of directories where executable programs are located. For example, where Gulp was installed. It’s what allows you to type in commands in your command prompt and have the command be recognized.

The important part about the line npm install gulp -g is the last two characters: “-g”.  That tells NPM to install it globally, which ultimately adds it to your “Path” variable. That part didn’t work so we have to add it manually.

To do this we need to open up the “Environment Variables” editor inside Windows Advanced System Settings. Go to the Start screen/menu by pressing the Windows key. Start typing a search for “System Settings”. You should get an option to open “Advanced System Settings”. Clicking that should give you a window that looks like this:

advanced-system-settings

Click on the Environment Variables button to launch that editor.

environment-variable-editor

Select the “Edit…” button. If you are on Window 8 or earlier you will see a simple window that contains an input for the variable name and the variable value.

edit-path-variable-windows-7

We want to edit the “Variable value”. This value is a string which contains a series of semi-colon delimited ; paths to locations on your file system. We are going to add one for NPM at the end of that line. First make sure that we don’t already have the path listed in there. If we do there are bigger problems. Just start over by re-installing Node.js. Otherwise, add a semi-colon to the end of that line and copy in the line below to point to the NPM folder in your local AppData directory. Here’s the text we will enter:

%AppData%\Roaming\npm

For Windows 10 users you get a nice little list box that allows you to more easily add your paths. Ultimately it does the same thing under the hood, but it’s a much easier way of managing the paths.

edit-path-variable-windows-10

Et voila! Now you should be able to run your Gulp tasks without getting the dreaded 'gulp' is not recognized... error.


            
  • siddhant pandey

    It doesn’t solved my problem