Есть код для Gulpfile.js от более поздних версии Gulp, который не работает с синтаксисом Gulp 4 и выше. Есть ли те кто могли бы помочь разобраться?

Question

[doctor__23]

Я только учусь, и мне скинули настройки для gulpfile.js, но судя по всему это работает только на старой версии Gulp. Пока что нет возможности сесть и разобраться с синтаксисом. Поэтому прошу помощи у более опытных товарищей указать непутевому, что и где поменять, так как я пока не понимаю какие зависимости у меня синхронные, а какие асинхронные:( Буду признателен, за помощь:)

Вот код с gulpfile.js:

'use strict';

var gulp = require('gulp'),
    mainBowerFiles = require('main-bower-files'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    browserSync = require("browser-sync"),
    reload = browserSync.reload;


var path = {
    vendor: {
        js: 'app/js/',
        css: 'app/css/'
    },
    dist: {               //Тут мы укажем куда складывать готовые после сборки файлы

        html: 'dist/',
        js: 'dist/js/',
        scss: 'dist/css/',
        css: 'dist/css/',
        img: 'dist/img/',
        fonts: 'dist/fonts/'
    },
    app: {               //Пути откуда брать исходники

        html: 'app/*.html',               //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html

        js: 'app/js/*.js',              //В стилях и скриптах нам понадобятся только main файлы

        scss: 'app/css/*.scss',
        css: 'app/css/*.css',
        img: 'app/img/**/*.*',               //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов

        fonts: 'app/fonts/**/*.*'
    },
    watch: {               //Тут мы укажем, за изменением каких файлов мы хотим наблюдать

        html: 'app/**/*.html',
        js: 'app/js/**/*.js',
        scss: 'app/css/**/*.scss',
        css: 'app/css/**/*.css',
        img: 'app/img/**/*.*',
        fonts: 'app/fonts/**/*.*'
    },
    clean: './dist'
};



var config = {
    server: {
        baseDir: "./dist"
    },
    tunnel: true,
    host: 'localhost',
    port: 8081,
    logPrefix: "WAYUP"
};

gulp.task('vendorJs:build', function () {
    gulp.src( mainBowerFiles('**/*.js') )             //Выберем файлы по нужному пути
        .pipe(gulp.dest(path.vendor.js))              //Выплюнем готовый файл в app
});

gulp.task('vendorCss:build', function () {
    gulp.src( mainBowerFiles('**/*.css') )                         //Выберем файлы по нужному пути
        .pipe(gulp.dest(path.vendor.css))                         //И в app
});

gulp.task('html:build', function () {
    gulp.src(path.app.html)                       //Выберем файлы по нужному пути
        .pipe(gulp.dest(path.dist.html))         //Выплюнем их в папку build
        .pipe(reload({stream: true}));               //И перезагрузим наш сервер для обновлений
});

gulp.task('js:build', function () {
    gulp.src(path.app.js)                   //Найдем наш main файл
        .pipe(sourcemaps.init())            //Инициализируем sourcemap
        .pipe(uglify())                              //Сожмем наш js
        .pipe(sourcemaps.write())                //Пропишем карты
        .pipe(gulp.dest(path.dist.js))              //Выплюнем готовый файл в build
        .pipe(reload({stream: true}));              //И перезагрузим сервер
});

gulp.task('scss:build', function () {
    gulp.src(path.app.scss)               //Выберем наш main.scss
        .pipe(sourcemaps.init())            //То же самое что и с js
        .pipe(sass())                                 //Скомпилируем
        .pipe(prefixer())                             //Добавим вендорные префиксы
        .pipe(cleanCSS())                           //Сожмем
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.dist.scss))          //И в build
        .pipe(reload({stream: true}));
});

gulp.task('css:build', function () {
    gulp.src(path.app.css)                 //Выберем наш main.css
        .pipe(sourcemaps.init())           //То же самое что и с js
        .pipe(gulp.dest(path.dist.css))        //И в build
        .pipe(reload({stream: true}));
});

gulp.task('image:build', function () {
    gulp.src(path.app.img)               //Выберем наши картинки
        .pipe(imagemin({              //Сожмем их
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.dist.img))               //И бросим в build
        .pipe(reload({stream: true}));
});

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

gulp.task('build', [
    'vendorCss:build',
    'vendorJs:build',
    'html:build',
    'js:build',
    'scss:build',
    'css:build',
    'fonts:build',
    'image:build'
]);

gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.scss], function(event, cb) {
        gulp.start('scss: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');
    });
});

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

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

gulp.task('default', ['build', 'webserver', 'watch'

]);

А вот ошибка, которую выдает консоль Git:

$ gulp --tasks
assert.js:385
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (C:\Users\devil\YandexDisk\ВэбРазработка\site\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (C:\Users\devil\YandexDisk\ВэбРазработка\site\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (C:\Users\devil\YandexDisk\ВэбРазработка\site\gulpfile.js:119:6)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at execute (C:\Users\devil\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18) {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

Версия Gulp:
CLI version: 2.2.0
Local version: 4.0.2

Answer 1

[doctor__23]

Вопрос решен, если кому инетерсно или может поможет, то вот конечный код, который получился для gulp <4.

var gulp 			= require('gulp'),
	sass 			= require('gulp-sass'),
    prefixer      	= require('gulp-autoprefixer'),
    cleanCSS       	= require('gulp-clean-css'),
    uglify         	= require('gulp-uglify'),
    imagemin       	= require('gulp-imagemin'),
    pngquant       	= require('imagemin-pngquant'),
    watch          	= require('gulp-watch'),
    rimraf         	= require('rimraf'),
    browserSync    	= require("browser-sync"),
    sourcemaps     	= require('gulp-sourcemaps'),
    mainBowerFiles 	= require('main-bower-files'),
    cache 			= require('gulp-cache'),
    reload         	= browserSync.reload;


var path = {
    vendor: {
        js: 'app/js/',
        css: 'app/css/'
    },
    dist: { //Тут мы укажем куда складывать готовые после сборки файлы
        html: 'dist/',
        js: 'dist/js/',
        sass: 'dist/css/',
        css: 'dist/css/',
        img: 'dist/img/',
        fonts: 'dist/fonts/'
    },
    app: { //Пути откуда брать исходники
        html: 'app/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html
        js: 'app/js/*.js',//В стилях и скриптах нам понадобятся только main файлы
        sass: 'app/sass/*.sass',
        css: 'app/css/*.css',
        img: 'app/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
        fonts: 'app/fonts/**/*.*'
    },
    watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
        html: 'app/**/*.html',
        js: 'app/js/**/*.js',
        sass: 'app/sass/**/*.sass',
        css: 'app/css/**/*.css',
        img: 'app/img/**/*.*',
        fonts: 'app/fonts/**/*.*'
    },
    clean: './dist'
};

var config = {
    server: {
        baseDir: "./dist"
    },
    notify:false
};

gulp.task('vendorJs:build', async function () {
    gulp.src( mainBowerFiles('**/*.js')) //Выберем файлы по нужному пути
        .pipe(gulp.dest(path.vendor.js)) //Выплюнем готовый файл в app
});

gulp.task('vendorCss:build', async function () {
    gulp.src( mainBowerFiles('**/*.css') ) //Выберем файлы по нужному пути
        .pipe(gulp.dest(path.vendor.css)) //И в app
});

gulp.task('html:build', function () {
    gulp.src(path.app.html) //Выберем файлы по нужному пути
        .pipe(gulp.dest(path.dist.html)) //Выплюнем их в папку build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('sass:build', function () {
    gulp.src(path.app.sass) //Выберем наш main.scss
        .pipe(sourcemaps.init()) //То же самое что и с js
        .pipe(sass()) //Скомпилируем
        .pipe(prefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) //Добавим вендорные префиксы
        .pipe(cleanCSS()) //Сожмем
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.dist.css)) //И в build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('js:build', function () {
    gulp.src(path.app.js) //Найдем наш main файл
        .pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(uglify()) //Сожмем наш js
        .pipe(sourcemaps.write()) //Пропишем карты
        .pipe(gulp.dest(path.dist.js)) //Выплюнем готовый файл в build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('css:build', function () {
    gulp.src(path.app.css) //Выберем наш main.css
        .pipe(sourcemaps.init()) //То же самое что и с js
        .pipe(prefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) //Добавим вендорные префиксы
        .pipe(gulp.dest(path.dist.css)) //И в build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('image:build', function () {
    gulp.src(path.app.img) //Выберем наши картинки
        .pipe(imagemin({ //Сожмем их
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.dist.img)) //И бросим в build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('fonts:build', function() {
    gulp.src(path.app.fonts)
        .pipe(gulp.dest(path.dist.fonts))
        .pipe(reload({stream: true})); //И перезагрузим сервер
});



gulp.task('build', gulp.parallel('vendorCss:build', 'vendorJs:build',  'html:build', 'sass:build', 'js:build', 'css:build', 'image:build', 'fonts:build'));

gulp.task('watch', function(event, cb){
    watch(path.watch.html, gulp.parallel('html:build'));
    watch(path.watch.sass, gulp.parallel('sass:build'));
    watch(path.watch.css, gulp.parallel('css:build'));
    watch(path.watch.js, gulp.parallel('js:build'));
    watch(path.watch.img, gulp.parallel('image:build'));
    watch(path.watch.fonts, gulp.parallel('fonts:build'));
});

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

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

gulp.task('clear', () =>
    cache.clearAll()
);

gulp.task('default', gulp.parallel('build', 'webserver', 'watch'));

Answer 2

[approximate solution]

Ошибка тут.

gulp.task('default', ['build', 'webserver', 'watch'

В 4 галпе все работает через parallel - пример -

gulp.task('default', gulp.parallel('watch','browserSync', 'sass'));

https://fettblog.eu/gulp-4-parallel-and-series/

Comments

[doctor__23]

Это я уже понял. Есть два атрибута для обозначения зависимости: gulp.parallel и gulp.series, первое это асинхронная зависимость, а второе это синхронная зависимость, я не совсем понимаю, как определять зависимости:(

[approximate solution]

doctor__23, попробуйте просто пустить все таски через parallel. И посмотрите будет ли выдавать ошибку.

[doctor__23]

Насколько я понимаю, так как в моем коде нет зависимостей, которые должны выполняться параллельно, кроме последнего таска. Если я проставлю всем таскам gulp.series, а последнему gulp.parallel, то все заработает?

[approximate solution]

doctor__23, Должно, проверьте, и если будут ошибки кидайте сюда лог. Разберемся.

[doctor__23]

approximate solution, gulp.task('default', gulp.parallel ('build', 'webserver', 'watch'));
прописал финальный таск вот так. Теперь выпадает вот такая ошибка:

C:\Users\devil\YandexDisk\ВэбРазработка\site\gulpfile.js:64
});

на 64 строке только "});" только вот эти 3 символа.

[doctor__23]

approximate solution, поставил gulp 3.9.1 и точно такая же ошибка.

C:\Users\devil\YandexDisk\ВэбРазработка\site\gulpfile.js:64
});

Answer 3

[PorodnOFF]

Вообще Gulp 4 мне очень не нравится какими то непредсказуемыми ошибками.
Но мне кажется вам стоит избегать таких путей при работе с ним:
C:\Users\devil\YandexDisk\ВэбРазработка\

Comments

[doctor__23]

Точно, почему-то не додумался назвать папки на латинице))
Но после того, как переименовал, все равно выдает ошибку(

C:\Users\devil\YandexDisk\WebLancer\site\gulpfile.js:64
});