Gulp Cannot convert undefined or null to object

Question

my gulpfile.js contains the ff:

'use strict'

// All add-ons required
const gulp = require('gulp')
const uglify = require('gulp-uglify')
const sourcemaps = require('gulp-sourcemaps')
const csso = require('gulp-csso')
const htmlmin = require('gulp-htmlmin')
const concat = require('gulp-concat')
const rename = require('gulp-rename')
const del = require('del')

// Tasks

// Minifies HTML
gulp.task('pages', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin({ collapseWhitespace: true, ignoreCustomComments: '[ /!/ ]', removeComments: true }))
    .pipe(gulp.dest('./dist/'))
})

// Copy NPM frameworks to vendor/
gulp.task('vendor', function() {
  return gulp.src(['./node_modules/materialize-css/dist/css/materialize.min.css', './node_modules/materialize-css/dist/js/materialize.min.js'], { base: 'node_modules' })
    .pipe(gulp.dest('./dist/vendor/'))
})

// Minifies CSS
gulp.task('styles', function() {
  return gulp.src('./src/assets/styles/*.css')
    .pipe(sourcemaps.init())
  // Minify the file
    .pipe(csso())
  // Concatenate all CSS files to 'styles.min.css' then Output
    .pipe(concat('design'))
    .pipe(rename({ suffix: '.min.css' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/css/'))
})

// Minifies JS Files
gulp.task('scripts', function() {
  return gulp.src('./src/assets/js/*.js')
  // Create a sourcemap
    .pipe(sourcemaps.init())
  // Minify the file
    .pipe(uglify())
  // Concatenate all js files to 'app.min.js' then Output
    .pipe(concat('asset'))
    .pipe(rename({ suffix: '.min.js' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/js/'))
})

// Minifies the main Renderer file `main.js`
gulp.task('renderer', function() {
  return gulp.src('./src/main.js')
  // Create a sourcemap
    .pipe(sourcemaps.init())
  // Minify the file
    .pipe(uglify())
  // Concatenate all js files to 'app.min.js' then Output
    .pipe(concat('app'))
    .pipe(rename({ suffix: '.min.js' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/'))
})

// Cleans the dist/ folder if not empty
// to avoid conflicts per gulp runs
gulp.task('clean', function() {
  return gulp.src('dist/*')
    .pipe(del('./dist/*'))
})

// Default Build
gulp.task('default',
  gulp.series('clean', gulp.parallel('pages', 'vendor', 'styles', 'scripts', 'renderer')))

everytime I run gulp or gulp [task] it just throw some errors that didn't make sense for me:

[19:43:57] Using gulpfile ~\Desktop\LAN\Workspace\Code\secret [revamp]\gulpfile.js
C:\Users\Admin\AppData\Roaming\npm\node_modules\gulp\lib\taskTree.js:4
  return Object.keys(tasks)
                ^

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at module.exports (C:\Users\Admin\AppData\Roaming\npm\node_modules\gulp\lib\taskTree.js:4:17)
    at logTasks (C:\Users\Admin\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:134:14)
    at C:\Users\Admin\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:127:14
    at internalTickCallback (internal/process/next_tick.js:70:11)
    at process._tickCallback (internal/process/next_tick.js:47:5)
    at Function.Module.runMain (internal/modules/cjs/loader.js:763:11)
    at startup (internal/bootstrap/node.js:303:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:872:3)

Already tried this solution but unluckily didn't work out for me.

P.S
my gulp version is "gulp": "^4.0.0"

Answer 1

Was facing the same issues and found out this probably has to do with Settings made in your IDE, for example PHPStorm. In my case PHPStorm was using Gulp 3.7 interpreter instead of the local 4.0 which is installed by NPM.

Go to Run » Edit configurations » Gulp