I have a working gulpfile (gulp v4.0.2) here: In this repo

I hit this snag immediately when following the tutorial, and I needed to rewrite it anyway.

-enjoy

I was struggling as well, and after some reading and lots of trial and errors I found a solution that works for me.

Gulp 4 no longer accepts start, you need to use either series which will run the tasks one after the other (as the name implies), and will exit if there's an error in any of those tasks, or parallel which will run the tasks in parallel and if there's an error the other tasks may keep running.

The following code will reload your browser if there's any changes, also will minify files, and compress images as well.

What I did is... well, I made every task as parallel basically.

I'm new to gulp, so feel free to edit my answer.

Here's my actual gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const rename = require('gulp-rename');
const imagemin = require('gulp-imagemin');
const fs = require('fs');

const cssAddonsPath = './css/modules/';

// CSS Tasks
gulp.task('css-compile-modules', (done) => {
  gulp.src('scss/**/modules/**/*.scss')
    .pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(rename({ dirname: cssAddonsPath }))
    .pipe(gulp.dest('./dist/'));

    console.log("compiling css...");
    done();
});

gulp.task('css-compile', gulp.series('css-compile-modules', () => {
  return gulp.src('scss/*.scss')
    .pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest('./dist/css/'));
}));

gulp.task('css-minify-modules', () => {
  return gulp.src(['./dist/css/modules/*.css', '!./dist/css/modules/*.min.css'])
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/css/modules'));
});

gulp.task('css-minify', gulp.series('css-minify-modules', () => {
    return gulp.src(['./dist/css/*.css', '!./dist/css/*.min.css', '!./dist/css/bootstrap.css'])
      .pipe(cssmin())
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('./dist/css'));
}));

// JavaScript Tasks
gulp.task('js-build', () => {

  const plugins = getJSModules();

  return gulp.src(plugins.modules)
    .pipe(concat('mdb.js'))
    .pipe(gulp.dest('./dist/js/'));

    gulp.series('js-lite-build');
    gulp.series('js-minify');

});

gulp.task('js-minify', () => {
  return gulp.src(['./dist/js/mdb.js'])
    .pipe(minify({
      ext:{
        // src:'.js',
        min:'.min.js'
      },
      noSource: true,
    }))
    .pipe(gulp.dest('./dist/js'));
});

// Image Compression
gulp.task('img-compression', function() {
  return gulp.src('./img/*')
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}),
      imagemin.jpegtran({progressive: true}),
      imagemin.optipng({optimizationLevel: 5}),
      imagemin.svgo({
        plugins: [
          {removeViewBox: true},
          {cleanupIDs: false}
        ]
      })
    ]))
    .pipe(gulp.dest('./dist/img'));
});

// Live Server
gulp.task('live-server', function(done) {
  console.log("Restarting server...");
  browserSync.reload();
  done();
});
function initBrowser(){
  browserSync.init({
    server: {
      baseDir: "./dist/",
      directory: true
    },
    notify: false
  },function(){
    console.log("asdasd");
  });
}
// Watch on everything
gulp.task('mdb-go', function(done) {
  initBrowser();
  gulp.watch("**/*", {cwd: './dist/'}, gulp.parallel('live-server'));
  gulp.watch("scss/**/*.scss", gulp.parallel('css-compile'));
  gulp.watch(["dist/css/*.css", "!dist/css/*.min.css"], gulp.parallel('css-minify'));
  gulp.watch("js/**/*.js", gulp.parallel('js-build'));
  gulp.watch(["dist/js/*.js", "!dist/js/*.min.js"], gulp.parallel('js-minify'));
  gulp.watch("**/*", {cwd: './img/'}, gulp.parallel('img-compression'));
});

function getJSModules() {
  delete require.cache[require.resolve('./js/modules.js')];
  return require('./js/modules');
}

Hope this helps!

change line 102ff in the gulpfile of V. 4.8.8 to:

// Watch on everything
gulp.task('mdb-go', gulp.series('live-server'), function(done) {
  gulp.watch("scss/**/*.scss", ['css-compile']);
  gulp.watch(["dist/css/*.css", "!dist/css/*.min.css"], ['css-minify']);
  gulp.watch("js/**/*.js", ['js-build']);
  gulp.watch(["dist/js/*.js", "!dist/js/*.min.js"], ['js-minify']);
  gulp.watch("**/*", {cwd: './img/'}, ['img-compression']);
});

This works to fix the gulp mdb-go error TypeError: gulp.start is not a function with gulp 4.x

TBAL: And maybe fix the lines 55,56 as well by changing gulp.start to gulp.series.

But the later change needs testing

When i rollback to gulp 3.9.1 I get:

TypeError: gulp.series is not a function

Best of every mess ;-)

Why do you recommend to install gulp 4 in the currently published Tutorial and then deliver a deprecated gulpfile with the download?

npm install gulp@4.0.2 -g

at https://mdbootstrap.com/education/bootstrap/gulp-installation/

Is there any way to use gulp v4 since node v12 doesn't work with gulp v3.9.1?