Использование Gulp для минимизации и автоматического обновления файла CSS - PullRequest
Новая
       9

Использование Gulp для минимизации и автоматического обновления файла CSS

0 голосов
/ 19 ноября 2018

У меня есть задача Gulp, которая минимизирует мой CSS в одной папке, а затем передает его в другую папку.

const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");

gulp.task("minify-css", () => {
  return (
    gulp
      .src("./css/**/*.css")
      .pipe(cleanCSS())
      .pipe(gulp.dest("minified"))
  );
});

Команда gulp minify-css работает отлично.Я не хочу постоянно вводить эту команду в терминале, хотя.

Я хочу, чтобы приведенный ниже код просматривал мой CSS-файл, а при его изменении я хочу, чтобы задача minify-css запускалась и обновляла мой минимизированный файл.файл, но он не работает: 

gulp.task("default", function(evt) {
  gulp.watch("./css/**/*.css", function(evt) {
    gulp.task("minify-css");
  });
});

Есть идеи, почему это не работает?Заранее спасибо!

1 Ответ

0 голосов
/ 22 ноября 2018

Проблема заключается в области, где вы вызываете gulp.task('minify-css') внутри функции обратного вызова gulp.watch. Этот код на самом деле не вызывает задачу minify-css, а порождает задачу anonymous, указанную вами в ваших журналах. Вместо этого gulp.watch должен вызывать функцию, которая внутренне выполняет задание minify-css.

Другая проблема, вероятно, связана с изменениями синтаксиса, произошедшими в gulp-4. Их не много, но они могут сбить с толку.

Мне удалось исправить проблему, и она работает. Вот обновленный код для gulpfile.js ниже: 

const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");

function minifyCSS() {
  return (
    gulp
      .src("./css/*.css")
      .pipe(cleanCSS())
      .pipe(gulp.dest("minified"))
  );
}

gulp.task("minify-css", minifyCSS);

gulp.task("watch", () => {
  gulp.watch("./css/*.css", minifyCSS);
});

gulp.task('default', gulp.series('minify-css', 'watch'));

Надеюсь, это поможет.

...