If you’re using Gulp across many projects (especially across many open source ones), you may come across errors that look similar to the following :
[10:19:23] Warning: gulp version mismatch: [10:19:23] Global gulp is 3.9.1 [10:19:23] Local gulp is 3.8.11
The issue is caused by having a local gulp install for your project and one installed globally. You can check this by running the command “gulp -v” from a command line. You should see something similar to :
[11:05:00] CLI version 3.9.1 [11:05:00] Local version 3.8.11
How to fix it? Well first it’s maybe better to understand why this is the case. Why do we have a “local” version of gulp and a global version installed?
The local version is there because it ensures that gulp runs the same on any machine the code is run on. Including your build server or other development machines. Ensuring that the same version is run everywhere is a great way to ensure consistency.
The global version is there because it allows you to type “Gulp” from the command line essentially. Having the executable in your system path is very handy.
The Sledgehammer Fix
I call this the sledgehammer fix because it’s really just brutalizing a solution that happens to work. This fix is to simply update both your CLI and Local Gulp to the same version. You can do this by going into your web project in a command prompt and calling :
npm update gulp -g npm update gulp
Warning. If for any reason your local version or global version was on a specific version of gulp, then you’ve just massacred it. If you’re working in a team you should ask before you do this or be prepared to lose friends in the workplace. Of course, if you’re a one man band and you haven’t picked a version of gulp for any particular reason, then this will work just fine.
The “Slightly More Elegant” Fix
The second fix does take a while of getting used to. Inside your package.json file you can add the following :
"scripts" : {
"gulp" : "gulp"
}You can now run the local installed version of gulp (Without calling the global version), by typing “npm run gulp” from a command line inside your web project. It does take some getting used to if you’ve always just typed straight “gulp” from the command line.
What this does mean is that passing in various options and flags for gulp gets a bit gnarly. You usually end up with something more like the following :
"scripts" : {
"builddev" : "gulp --build-dev"
"buildprod" : "gulp --build-prod"
}Essentially spelling out all your different options for gulp (Including watches etc) within your scripts section.
The “Elegant” Fix
A more elegant fix is actually by removing gulp entirely from your globals and installing only the CLI. Run the following
npm rm --global gulp npm install gulp-cli -g
This first command removes gulp globally (But not from local installs such as in your web project). The second command installs Gulp-CLI. The CLI is the command line interface for gulp and is the minimum amount to run gulp from the command line, but not actually have any of it’s “working parts” if you will globally. This is great because as above, we learned that the only reason we really have gulp globally is for the command line, not for any working parts. This solves our issue perfectly!
