How to start gulp execution?

Question

css

when executing the gulp watch command, it gives the following

PS D:\templates\bitlex> gulp watch
assert.js:374
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D:\templates\bitlex\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (D:\templates\bitlex\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (D:\templates\bitlex\gulpfile.js:40:6)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at execute (C:\Users\HP\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18) {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

package.json file

{
  "name": "cdm",
  "version": "1.0.0",
  "description": "cdm project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "litesite",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.23.7",
    "del": "^3.0.0",
    "gulp": "^4.0.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-cache": "^1.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.1",
    "gulp-uglifyjs": "^0.6.2",
    "imagemin-pngquant": "^5.1.0"
  },
  "dependencies": {
    "graceful-fs": "^4.2.3",
    "gulp-cli": "^2.2.0",
    "minimatch": "^3.0.4",
    "natives": "^1.1.6",
    "npm": "^6.12.1"
  }
}

gulpfile.js file

var gulp        = require('gulp'),
  sass        = require('gulp-sass'),
  browserSync = require('browser-sync'),
  concat 	    = require('gulp-concat'),
  uglify      = require('gulp-uglifyjs'),
  cssnano     = require('gulp-cssnano'),
  rename      = require('gulp-rename'),
  del         = require('del'),
  imagemin = require('gulp-imagemin'),
  pngquant = require('imagemin-pngquant'),
  cache = require('gulp-cache'),
  autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function(){
  return gulp.src('app/sass/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.reload({stream: true}))
});

gulp.task('browser-sync', function(){
  browserSync({
    server: {
      baseDir: 'app'
    },
  });
});

gulp.task('scripts', function(){
  return gulp.src([
    'app/libs/jquery/dist/jquery.min.js'
  ])
  .pipe(concat('libs.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('app/js'));
});

gulp.task('css-libs', ['sass'], function(){
  return gulp.src('app/css/libs.css')
  .pipe(cssnano())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('app/css'))
});

gulp.task('clean', function(){
  return del.sync('dist');
});

gulp.task('clear', function(){
  return cache.clearAll();
});

gulp.task('img', function(){
  return gulp.src('app/img/**/*')
  .pipe(cache(imagemin({
    interlaced: true,
    progressive: true,
    svgoPlugins: [{removeViewBox: false}],
    une: [pngquant()]
  })))
  .pipe(gulp.dest('dist/img'));
});

gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function(){
  gulp.watch('app/sass/**/*.scss', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/*.js', browserSync.reload);
});

gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function(){
  var buildCss = gulp.src([
    'app/css/style.css',
    'app/css/libs.min.css',
  ])
    .pipe(gulp.dest('dist/css'));

  var buildFonts = gulp.src('app/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'));

  var buildJs = gulp.src('app/js/**/*')
    .pipe(gulp.dest('dist/js'));

  var buildHtml = gulp.src('app/*.html')
    .pipe(gulp.dest('dist'));
});

Answer 1

With the transition of gulp from version 3 to 4, the syntax has changed. If in version 3 it was possible to specify in [] brackets which functions to execute with a task, then in version 4 special functions gulp.series (for serial execution) and gulp.parallel (for parallel) appeared for this. That is, here is such a record

gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function(){
  gulp.watch('app/sass/**/*.scss', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/*.js', browserSync.reload);
});

is replaced by such

gulp.task('watch', gulp.parallel('browser-sync', 'css-libs', 'scripts'), function(){
  gulp.watch('app/sass/**/*.scss', gulp.parallel('sass'));
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/*.js', browserSync.reload);
});

And also in version 3 it was possible to refer to a function in any part of the code, then in version 4, in order to refer to it, it must be created above. Otherwise, the error "Task never defined: task_name" will appear.