Topic: gulp.start is not a function
➜ 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
Maxter404 answered 5 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 pro premium priority commented 5 years ago
Thank you for contributing!
infin80 commented 5 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 answered 5 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 answered 5 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 answered 6 years ago
Is there any way to use gulp v4 since node v12 doesn't work with gulp v3.9.1?
MDBootstrap staff pro premium priority commented 6 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.
acsr answered 5 years ago
When i rollback to gulp 3.9.1 I get:
TypeError: gulp.series is not a function
Best of every mess ;-)
wormtreat answered 5 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 pro premium commented 5 years ago
Do you still need our help?
wormtreat commented 5 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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
Piotr Glejzer staff commented 6 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 6 years ago
Yes it was 4.0, so I reverted back to 3.9.1 and that resolved the issue