Search code examples
gulpgulp-watch

How to fix 'Task function must be specified' in Gulp?


I'm studying GULP, and I want the page to update automatically when I modify the CSS.


const gulp = require("gulp");
const jshint = require("gulp-jshint");
const changed = require("gulp-changed");
const watch = require("gulp-watch");
const rename = require("gulp-rename");
const minifyCSS = require("gulp-uglifycss");
const sass = require("gulp-sass");
const cssImport = require("gulp-cssimport");

gulp.task("changed", function() {
  return gulp
    .src("src/css/*.css")
    .pipe(changed("public/assets/css/"))
    .pipe(cssImport())
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(rename({ extname: ".min.css" }))
    .pipe(gulp.dest("public/assets/css/"));
});

gulp.task("jshint", function() {
  gulp
    .src("src/css/*.css")
    .pipe(jshint())
    .pipe(jshint.reporter("default"));
});

gulp.task("watch", function() {
  watch("src/css/*.css", ["changed"]);
});

gulp.task("default", ["jshint", "watch"]);

I'm trying to use "gulp-watch", but it's giving the error "Task function must be specified" in this code above.


Solution

  • The problem was that I was trying to watch the old version of GULP, not version 4.0.0.

    So I changed my code to work, and it looked like this:

    const gulp = require("gulp");
    const rename = require("gulp-rename");
    const minifyJS = require("gulp-uglify");
    const minifyCSS = require("gulp-uglifycss");
    const sass = require("gulp-sass");
    const babel = require("gulp-babel");
    const cssImport = require("gulp-cssimport");
    
    gulp.task(
      "base",
      gulp.series(function() {
        return gulp.src("src/templates/*.html").pipe(gulp.dest("public/"));
      })
    );
    
    gulp.task(
      "javascript",
      gulp.series(function() {
        return gulp
          .src("src/js/*.js")
          .pipe(babel({ presets: ["@babel/env"] }))
          .pipe(minifyJS())
          .pipe(rename({ extname: ".min.js" }))
          .pipe(gulp.dest("public/assets/js/"));
      })
    );
    
    gulp.task(
      "css",
      gulp.series(function() {
        return gulp
          .src("src/css/*.css")
          .pipe(cssImport())
          .pipe(sass())
          .pipe(minifyCSS())
          .pipe(rename({ extname: ".min.css" }))
          .pipe(gulp.dest("public/assets/css/"));
      })
    );
    
    gulp.task(
      "watch",
      gulp.series(function() {
        gulp.watch("src/templates/*.html", gulp.parallel(["base"]));
        gulp.watch("src/js/*.js", gulp.parallel(["javascript"]));
        gulp.watch("src/css/*.css", gulp.parallel(["css"]));
      })
    );
    
    gulp.task(
      "default",
      gulp.series(gulp.parallel("base", "javascript", "css", "watch"))
    );