Trying to start server with Gulp and it throw error

Question

I'm trying to run sever and I get this assertion error. I've uninstalled node and NPM and reinstalled again also I tried many steps and suggested solutions here but it doesn't fit with my problem.

AssertionError [ERR_ASSERTION]: Task never defined: node_modules/scss/bootstrap.scss
        at getFunction (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\helpers\normalizeArgs.js:15:5)
        at map (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\arr-map\index.js:20:14)
        at normalizeArgs (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\helpers\normalizeArgs.js:22:10)
        at Gulp.series (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\series.js:13:14)
        at C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\gulpfile.js:7:26
        at sass (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\set-task.js:13:15)
        at bound (domain.js:422:14)
        at runBound (domain.js:435:12)
        at asyncRunner (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\async-done\index.js:55:18)
        at processTicksAndRejections (internal/process/task_queues.js:75:11)

This's my code

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');


gulp.task('sass', async function () {
    return gulp.src(gulp.series('node_modules/scss/bootstrap.scss', 'src/scss/*.scss'))
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});


gulp.task('js', async function () {
    return gulp.src(gulp.series('node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/popper.min.js'))
        .pipe(gulp.dest('src/js'))
        .pipe(browserSync.stream());
});


gulp.task('serve', async function () {
    browserSync.init({
        server: "./src",
    });
    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], 'sass');
    gulp.watch("src/*.html").on('change', browserSync.reload);
})


gulp.task('default', gulp.series(gulp.parallel('sass', 'js', 'serve')));

after following what Sam said i faced this error Error: watching node_modules/bootstrap/scss/bootstrap.scss,src/scss/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series) at Gulp.watch (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\gulp\index.js:31:11) at C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\gulpfile.js:25:10 at serve — Alaa El Saedy, Dec 03 '19 at 17:47
Second crack of the whip — Hey Alaa, I’ve updated my answer for you, basically as the error is saying you must alway wrap tasks in either `series` or `parallel` even if it is just one task! I’ve actually ran the updated version of the code and it worked without error. — Sam, Dec 05 '19 at 08:53
Finally i made work after correcting gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass')); and the last thing i'm struggling in [Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false) — Alaa El Saedy, Dec 05 '19 at 13:57
There are a few answers already on stackoverflow for that problem. I would start by adding this `browser: 'chrome'` to your `browserSync.init({` Alternatively look at this: https://stackoverflow.com/questions/44432953/browser-sync-headless-environment-error or maybe this: https://stackoverflow.com/questions/42685783/browser-not-launching-with-browsersync-or-live-server/42845813#42845813 — Sam, Dec 05 '19 at 18:41
I already tried this and more with no changes browserSync.init({ port: 3001, server: { baseDir: "./src", open: true }, watchTask: true, browser: "chrome.exe", notify: false }); — Alaa El Saedy, Dec 08 '19 at 10:20
Sorry Alaa, without more info I was just making a stab in the dark! This additional problem is really beyond the scope of your original question. I would recommend trying what your error message suggests and setting `open: false`, terminal will display a link to your server if that works. If it doesn’t, it would be best to create another question specifically about that problem with details of your setup. Eg: your os & its version and the package.json with the versions of the packages your running, also might be worth throwing in node/npm & browser versions plus any unusal setup! Good luck! — Sam, Dec 10 '19 at 00:54

Sam · Answer 1 · 2019-12-05T08:55:43.337

The error is coming from the sass and js tasks. You are wrapping your sources in gulp.series. So Gulp is trying to run your sources as tasks.

They just need to be in an array [] like in the watch task.

Just change:

gulp.task('sass', async function () { return gulp.src(gulp.series('node_modules/scss/bootstrap.scss', 'src/scss/*.scss'))

to:

gulp.task('sass', async function () { return gulp.src(['node_modules/scss/bootstrap.scss', 'src/scss/*.scss'])

and then the same format in the js task

The second error (coming from your watch task) is because you need to wrap the tasks you are watching in either series or parallel. Even when theres only one task So change:

gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], 'sass');

to:

gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));

I did actually like what you said and it throws this Error: watching node_modules/bootstrap/scss/bootstrap.scss,src/scss/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series) at Gulp.watch (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\gulp\index.js:31:11) at C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\gulpfile.js:25:10 at serve — Alaa El Saedy, Dec 03 '19 at 17:29

Trying to start server with Gulp and it throw error

1 Answers1