Gulp task never defined

Question

I have problems while changing the syntax from gulp v3 to gulp v4. I almost got the code but a small error occurred. Can anyone help me with that error? And I have no previous knowledge of gulp this is the first task I'm performing hope anyone can help me to get through this.

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

// Compile Sass & Inject Into Browser
function style() {
  return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
};

// Move JS Files to src/js
function js() {
  return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
    .pipe(gulp.dest("src/js"))
    .pipe(browserSync.stream());
};

// Watch Sass & Server
function watch() {
  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.watch("src/*.html", gulp.series(copyHtml, browserSyncReload));
};

// Move Fonts Folder to src/fonts
function fonts() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest("src/fonts"));
};

// Move Font Awesome CSS to src/css
function fa() {
  return gulp.src('node_modules/font-awesome/css/font-awesome.min.css')
    .pipe(gulp.dest("src/css"));
};

exports.style = style;
exports.watch = watch;
exports.fonts = fonts;
exports.fa = fa;
exports.default = series(style, watch, fonts, fa);

Error Occurred

 ReferenceError: series is not defined
    at Object.<anonymous> (D:\Courses\Projects\Bootstrap_projects\bs4starter\gulpfile.js:47:1)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at requireOrImport (C:\Users\sai\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11)
    at execute (C:\Users\sai\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:37:3)
    at Liftoff.handleArguments (C:\Users\sai\AppData\Roaming\npm\node_modules\gulp-cli\index.js:211:24)

Thank you in advance.

Answer 1

You do not specify a default task, so gulp tells you this in an error message when you call it without specifying a task.

https://gulpjs.com/docs/en/getting-started/creating-tasks/

In the past, task() was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won't work.

Here is an example that would do style, fonts, fa in a series when gulp is run with no specified task:

exports.default = gulp.series(style, fonts, fa);

Since you require('gulp') as gulp, you can use gulp.series. My previous example was based on Gulp's own example where they instead use const { series } = require('gulp'); to import just series as its own function.