Henrique Tavares
Henrique Tavares

Reputation: 123

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.

Upvotes: 1

Views: 266

Answers (1)

Henrique Tavares
Henrique Tavares

Reputation: 123

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"))
);

Upvotes: 1

Related Questions