Как исправить «Задача должна быть указана» в Gulp? - PullRequest
Новая
       20

Как исправить «Задача должна быть указана» в Gulp?

1 голос
/ 19 апреля 2019

Я изучаю GULP и хочу, чтобы страница автоматически обновлялась при изменении 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"]);

Я пытаюсь использовать "gulp-watch" , но выдает ошибку «В этом коде должна быть указана целевая функция» .

1 Ответ

1 голос
/ 19 апреля 2019

Проблема заключалась в том, что я пытался посмотреть старую версию GULP, а не версию 4.0.0.

Итак, я изменил свой код на работу, и он выглядел так: 

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