On Saturday, April 2nd, I spoke at the Orlando Code Camp (#OrlandoCC). This is the second year I have spoken there and the fifth...
Trouble Shooting A Gulp Install On WindowsHallmanac
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
Gulp It Down
With NPM installed we can now install Gulp. You do this by running the command:
npm install gulp -g
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:
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!
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:
Click on the Environment Variables button to launch that 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.
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:
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.
Et voila! Now you should be able to run your Gulp tasks without getting the dreaded
'gulp' is not recognized... error.