Gulp, why is the project not building?

Question

gulp.js

Hello. I updated gulp to version 4 and now my project is not building. Can you tell me what is the reason?
The error that appears

[15:13:23] Using gulpfile E:\Work\Taker Corporation\WebDevep\webdevep_site\gulpfile.js
[15:13:23] Starting 'default'...
[15:13:23] 'default' errored after 4.14 ms
[15:13:23] TypeError: gulp.hasTask is not a function
    at E:\Work\Taker Corporation\WebDevep\webdevep_site\node_modules\run-sequence\index.js:23:22
    at Array.forEach (<anonymous>)
    at verifyTaskSets (E:\Work\Taker Corporation\WebDevep\webdevep_site\node_modules\run-sequence\index.js:17:11)
    at runSequence (E:\Work\Taker Corporation\WebDevep\webdevep_site\node_modules\run-sequence\index.js:130:2)
    at E:\Work\Taker Corporation\WebDevep\webdevep_site\gulpfile.js:173:5
    at taskWrapper (E:\Work\Taker Corporation\WebDevep\webdevep_site\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:395:14)
    at runBound (domain.js:408:12)
    at asyncRunner (E:\Work\Taker Corporation\WebDevep\webdevep_site\node_modules\async-done\index.js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)

gulpfile.js

"use strict";

var gulp = require("gulp"),
    autoprefixer = require("gulp-autoprefixer"),
    cssbeautify = require("gulp-cssbeautify"),
    removeComments = require('gulp-strip-css-comments'),
    rename = require("gulp-rename"),
    sass = require("gulp-sass"),
    cssnano = require("gulp-cssnano"),
    rigger = require("gulp-rigger"),
    uglify = require("gulp-uglify"),
    watch = require("gulp-watch"),
    plumber = require("gulp-plumber"),
    run = require("run-sequence"),
    rimraf = require("rimraf"),
    webserver = require("browser-sync");


/* Paths to source/build/watch files
=========================*/

var path = {
    build: {
        html: "dist/",
        js: "dist/assets/js/",
        css: "dist/assets/css/",
        img: "dist/assets/img/",
        fonts: "dist/assets/fonts/",
        json: "dist/assets/"
    },
    src: {
        html: "src/*.{htm,html,php}",
        js: "src/assets/js/*.js",
        css: "src/assets/sass/style.scss",
        img: "src/assets/img/**/*.*",
        fonts: "src/assets/fonts/**/*.*",
        json: "src/assets/*.json"
    },
    watch: {
        html: "src/**/*.{htm,html,php}",
        js: "src/**/*.js",
        css: "src/**/*.scss",
        img: "src/assets/img/**/*.*",
        fonts: "src/assets/fonts/**/*.*",
        json: "src/assets/*.json"
    },
    clean: "./dist"
};


/* Webserver config
=========================*/

var config = {
    server: "dist/",
    notify: false,
    open: true,
    ui: false
};


/* Tasks
=========================*/

gulp.task("webserver", function () {
    webserver(config);
});


gulp.task("html:build", function () {
    return gulp.src(path.src.html)
        .pipe(plumber())
        .pipe(rigger())
        .pipe(gulp.dest(path.build.html))
        .pipe(webserver.reload({stream: true}));
});


gulp.task("css:build", function () {
    gulp.src(path.src.css)
        .pipe(plumber())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ["last 8 versions"],
            cascade: true
        }))
        .pipe(cssbeautify())
        .pipe(gulp.dest(path.build.css))
        .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(removeComments())
        .pipe(rename("style.min.css"))
        .pipe(gulp.dest(path.build.css))
        .pipe(webserver.reload({stream: true}));
});


gulp.task("js:build", function () {
    gulp.src(path.src.js)
        .pipe(plumber())
        .pipe(rigger())
        .pipe(gulp.dest(path.build.js))
        .pipe(uglify())
        .pipe(rename("main.min.js"))
        .pipe(gulp.dest(path.build.js))
        .pipe(webserver.reload({stream: true}));
});


gulp.task("fonts:build", function () {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts));
});


gulp.task("image:build", function () {
    gulp.src(path.src.img)
        .pipe(gulp.dest(path.build.img));
});


gulp.task("json:build", function () {
    gulp.src(path.src.json)
        .pipe(gulp.dest(path.build.json));
});


gulp.task("clean", function (cb) {
    rimraf(path.clean, cb);
});


gulp.task('build', function (cb) {
    run(
        "clean",
        "html:build",
        "css:build",
        "js:build",
        "fonts:build",
        "image:build",
        "json:build"
        , cb);
});


gulp.task("watch", function () {
    watch([path.watch.html], function (event, cb) {
        gulp.start("html:build");
    });
    watch([path.watch.css], function (event, cb) {
        gulp.start("css:build");
    });
    watch([path.watch.js], function (event, cb) {
        gulp.start("js:build");
    });
    watch([path.watch.img], function (event, cb) {
        gulp.start("image:build");
    });
    watch([path.watch.fonts], function (event, cb) {
        gulp.start("fonts:build");
    });
    watch([path.watch.json], function (event, cb) {
        gulp.start("json:build");
    });
});


gulp.task("default", function (cb) {
    run(
        "clean",
        "build",
        "webserver",
        "watch"
        , cb);
});

package.json

{
  "name": "webdevep",
  "version": "1.0.0",
  "description": "webdevep",
  "author": "webhouse",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://[email protected]/webdevep_ru/webdevep_site.git"
  },
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-cssbeautify": "^1.0.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^1.4.0",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-strip-css-comments": "^2.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1",
    "install": "^0.13.0",
    "npm": "^6.10.0",
    "rimraf": "^2.6.3",
    "run-sequence": "^2.2.1"
  },
  "scripts": {
    "build": "gulp build",
    "start": "gulp"
  },
  "engines": {
    "node": ">=8.9.4"
  }
}

The file with the most errors is index.js

/*jshint node:true */

"use strict";

var colors = require('chalk');
var fancyLog = require('fancy-log');
var PluginError = require('plugin-error');

function options() { return module.exports.options }

function verifyTaskSets(gulp, taskSets, skipArrays) {
  if(taskSets.length === 0) {
    throw new Error('No tasks were provided to run-sequence');
  }

  var foundTasks = {};
  taskSets.forEach(function(t) {
    var isTask = typeof t === "string";
    var isArray = !skipArrays && Array.isArray(t);
    if(!isTask && !isArray) {
      throw new Error("Task " + t + " is not a valid task string.");
    }
    if(isTask && !gulp.hasTask(t)) {
      throw new Error("Task " + t + " is not configured as a task on gulp.  If this is a submodule, you may need to use require('run-sequence').use(gulp).");
    }
    if(skipArrays && isTask) {
      if(foundTasks[t]) {
        throw new Error("Task " + t + " is listed more than once. This is probably a typo.");
      }
      foundTasks[t] = true;
    }
    if(isArray) {
      if(t.length === 0) {
        throw new Error("An empty array was provided as a task set");
      }
      verifyTaskSets(gulp, t, true, foundTasks);
    }
  });
}

function filterArray(arr) {
  return arr.filter(function(t) { return !!t; });
}

function runSequence(gulp) {
  // load gulp directly when no external was passed
  if(gulp === undefined) {
    gulp = require('gulp');
  }

  // Slice and dice the input to prevent modification of parallel arrays.
  var taskSets = Array.prototype.slice.call(arguments, 1).map(function(task) {
    return Array.isArray(task) ? task.slice() : task;
  });
  var callBack = typeof taskSets[taskSets.length - 1] === 'function' ? taskSets.pop() : false;
  var currentTaskSet;

  var finished;

  if(options().ignoreUndefinedTasks) {
    // ignore missing tasks
    taskSets = filterArray(taskSets)
      .map(function(t) {
        if(Array.isArray(t)) {
          return filterArray(t);
        } else {
          return t;
        }
      });
  }

  function finish(e) {
    if(finished) return;
    finished = true;

    gulp.removeListener('task_stop', onTaskEnd);
    gulp.removeListener('task_err', onError);
    gulp.removeListener('err', onGulpError);

    var error;
    if(e && e.err) {
      error = new PluginError('run-sequence(' + e.task + ')', e.err, { showStack: options().showErrorStackTrace });
    }

    if(callBack) {
      callBack(error);
    } else if(error) {
      fancyLog(colors.red(error.toString()));
    }
  }

  function onError(err) {
    finish(err);
  }

  function onTaskEnd(event) {
    var idx = currentTaskSet.indexOf(event.task);
    if(idx > -1) {
      currentTaskSet.splice(idx, 1);
    }
    if(currentTaskSet.length === 0) {
      runNextSet();
    }
  }

  function onGulpError(e) {
    // In the case that you call gulp.stop after a successful run,
    // we will not receive a task_err or task_stop event. This callback
    // will finish the run sequence execution in case of an 'orchestration aborted'
    // even coming from gulp's global error handler. That event is fired in when
    // gulp.stop is called.
    if(e.message === 'orchestration aborted') {
      finish(e);
    }
  }

  function runNextSet() {
    if(taskSets.length) {
      var command = taskSets.shift();
      if(!Array.isArray(command)) {
        command = [command];
      }
      currentTaskSet = command;
      gulp.start.apply(gulp, command);
    } else {
      finish();
    }
  }

  verifyTaskSets(gulp, taskSets);

  gulp.on('task_stop', onTaskEnd);
  gulp.on('task_err', onError);
  gulp.on('err', onGulpError);

  runNextSet();
}

module.exports = runSequence.bind(null, undefined);
module.exports.use = function(gulp) {
  return runSequence.bind(null, gulp);
};

module.exports.options = {
  showErrorStackTrace: true,
  ignoreUndefinedTasks: false,
};

Please help me understand what is causing the error.

Answer 1

Gulp 4 needs code execution sequence gulp.parallel() , gulp.series() .
example:

gulp.task('watch', gulp.series('таски', function (done) {
   // код
    done();
}));

Learn more about migrating to Gulp 4