Gulp, почему не собирается проект?

Question

[Мар'ян Витак]

Всем привет. Я обновил gulp до 4 версии и теперь у меня не собирается проект. Можете сказать в чем причина?
Ошибка, которая появляется

[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://[e-mail]/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"
  }
}

Файл в которм больше всего ошибок 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,
};

Помогите пожалуйста понять в чем причина ошибки.

Comments

[alex]

вы доки к четвертой версии читали, перед тем как вопрос задавать?

понять в чем причина ошибки

очевидно же, что hasTask is not a function

Answer 1

[Martovitskiy]

В Gulp 4 нужна последовательность выполнения кода gulp.parallel(), gulp.series().
пример:

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

Подробнее как перейти на Gulp 4

Comments

[Мар'ян Витак]

То есть, если я правильно понял, то нужно такой код

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('watch', gulp.series('html:build', function (done) {
   return gulp.src(path.src.html)
        .pipe(plumber())
        .pipe(rigger())
        .pipe(gulp.dest(path.build.html))
        .pipe(webserver.reload({stream: true}));
    done();
}));

[Martovitskiy]

Мар'ян Витак, да, пробуйте.

Вот часть моей реализации:

function gulpSass() {
  return gulp
    .src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'))
    .pipe(browsersync.stream())
}


function browserSync(done) {
  browsersync.init({
    injectChanges: true,
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false
  });
  done();
}


function watchFiles(done) {
  gulp.watch('./scss/**/*.scss', gulp.parallel(gulpSass));
  done();
}

const watch = gulp.parallel(watchFiles, browserSync);


exports.watch = watch;

function reload(done) {
  browsersync.reload();
  done();
}

[Мар'ян Витак]

Martovitskiy, Спасибо, сейчас попробую и свой код переписать, а пока нашел такой пример, проект собирается, правда еще gulp-rigger нужно подключить.