Topic: gulp.start is not a function

TeddyS31 pro asked 5 years 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 5 years 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 5 years ago

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


wormtreat free answered 4 years 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 commented 4 years ago

Do you still need our help?


wormtreat free commented 4 years 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!


Maxter404 free answered 4 years 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!


MDBootstrap staff commented 4 years ago

Thank you for contributing!


infin80 free commented 4 years 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 free answered 4 years 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 free answered 4 years 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 commented 4 years ago

Gulp series was introduced in Gulp 4


acsr free answered 4 years 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 free answered 4 years ago


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


MDBootstrap staff commented 4 years 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Macbook Pro 13
  • Browser: Chrome
  • OS: Mac OS Mojave
  • Provided sample code: Yes
  • Provided link: Yes