GULP: gulp is not defined

Question

As shown in the screen shot below I am not able to run gulp to concat the JavaScript files. Its saying that gulp is not defined.

I have tried the following commands:

npm install -g gulp
npm install gulp
npm install gulp --save-dev

I have also set the environment variables as following:

C:\Users\<user>\AppData\Roaming\npm;C:\Python27;C:\Users\<user>\AppData\Roaming\npm\node_modules;C:\Users\<user>\AppData\Roaming\npm\node_modules\gulp;

var concat = require('gulp-concat');  
var rename = require('gulp-rename');  
var uglify = require('gulp-uglify');  


//script paths
var jsFiles = 'scripts/*.js',  
    jsDest = 'dist/scripts';

gulp.task('scripts', function() {  
    return gulp.src(jsFiles)
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest(jsDest));
});

Answer 1

Its occurs on Windows and usually one of the following fixes it:

• If you didn't, run npm install gulp on the project folder, even if you have gulp installed globally.

• Normally, It isn't a problem on Windows, but it could be a issue with the PATH. The package will try to get the PATH from the environment, but you can override it by adding exec_args to your gulp settings. For example, on Ubuntu:

  "exec_args": { "path": "/bin:/usr/bin:/usr/local/bin" }

Hope It will be OK.

Source: https://github.com/NicoSantangelo/sublime-gulp/issues/12

Answer 2

you just need to install and require gulp locally, you probably only installed it globally

At the command line

cd <project-root> && npm install --save-dev gulp

In your gulpfile.js

var gulp = require('gulp'); 

this is a different dependency than the command line dependency (that you installed globally). More specifically, it is the same NPM package, but the command line program will execute code usually from a different entry point in the NPM package then what require('X') will return.

If we go to the package.json file in the Gulp project on Github, it will tell the whole story:

{
  "name": "gulp",
  "description": "The streaming build system",
  "version": "3.9.1",
  "homepage": "http://gulpjs.com",
  "repository": "gulpjs/gulp",
  "author": "Fractal <[e-mail]> (http://wearefractal.com/)",
  "tags": [
    "build",
    "stream",
    "system",
    "make",
    "tool",
    "asset",
    "pipeline"
  ],
  "files": [
    "index.js",
    "lib",
    "bin",
    "completion",
    "gulp.1"
  ],
  "bin": {
    "gulp": "./bin/gulp.js"
  },
  "man": "gulp.1",
  "dependencies": {
    // ...
  },
  "devDependencies": {
     // ...
  },
  "scripts": {
    "prepublish": "marked-man --name gulp docs/CLI.md > gulp.1",
    "lint": "eslint . && jscs *.js bin/ lib/ test/",
    "pretest": "npm run lint",
    "test": "mocha --reporter spec",
    "coveralls": "istanbul cover _mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | coveralls && rm -rf ./coverage"
  },
  "engines": {
    "node": ">= 0.9"
  },
  "license": "MIT"
}

so at the command line:

$ gulp default

will execute this:

     "bin": {
        "gulp": "./bin/gulp.js"
      },

on the other hand, require('gulp') in your code will return the value of this:

https://github.com/gulpjs/gulp/blob/master/index.js

normally we see this in a package.json file as:

"main": "index.js"

but since this is the default, they just omitted it (which is dumb IMO, better to be explicit, but they aren't the first project I have seen take the lame shorthand route.).