gulp.start is not a function

web
mobile

Topic: gulp.start is not a function

TeddyS31 pro asked a year ago

➜ pt-new gulp go
[14:19:05] Using gulpfile ~/Projects/pt-new/gulpfile.js
[14:19:05] Starting 'go'...
[14:19:05] 'go' errored after 7.25 ms
[14:19:05] TypeError: gulp.start is not a function
at /Users/teddystanowski/Projects/pt-new/gulpfile.js:149:8
at taskWrapper (/Users/teddystanowski/Projects/pt-new/node_modules/undertaker/lib/set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (/Users/teddystanowski/Projects/pt-new/node_modules/async-done/index.js:55:18)
at process.internalTickCallback (internal/process/next_tick.js:70:11)

As you can see, for some reason it no longer responds to the gulp.start and I do not know how to fix. Could really use some help in resolving this one. It was working fine before.

The link attached offers a fix but I am not sure gulp fix


Piotr Glejzer staff commented a year ago

Hi,

Which version of gulp do you use? If you use 4.0 that probably a problem.

Did you try that command?

npm install --save-dev gulp@3.9.1

Best,

Piotr


TeddyS31 pro commented a year ago

Yes it was 4.0, so I reverted back to 3.9.1 and that resolved the issue


Maxter404 answered 7 months ago

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!


Piotr Obrebski staff commented 7 months ago

Thank you for contributing!


infin80 commented 7 months ago

@Maxter404 Bless your heart, soul, family, pets, home and everything you touch, do or care about for the rest of your days. YOU, ARE. BEAUTIFUL!


acsr pro premium answered 7 months ago

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


acsr pro premium answered 7 months ago

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/


xvmodvx answered 10 months ago

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


Piotr Obrebski staff commented 10 months ago

We are currently working on the introduction of the fourth version of the gulp for use in our packages. For now, I recomend using node LTS version 10.16.


acsr pro premium answered 7 months ago

When i rollback to gulp 3.9.1 I get:

TypeError: gulp.series is not a function

Best of every mess ;-)


Bartłomiej Malanowski staff pro premium commented 7 months ago

Gulp series was introduced in Gulp 4


wormtreat answered 6 months ago

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


Bartłomiej Malanowski staff pro premium commented 6 months ago

Do you still need our help?


wormtreat commented 6 months ago

I think you need my help, lol... It's a bit discouraging that your product breaks immediately, out of the box... I refactored the entire structure. It was a bit messy for my taste. I'd be happy to give my feedback and share code. I'm using this in a flask app. Aside from the rough start, it's a great looking product. Thank you for the free stuff!


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.5.10
  • Device: Macbook Pro 13
  • Browser: Chrome
  • OS: Mac OS Mojave
  • Provided sample code: Yes
  • Provided link: Yes
Tags