使用 Gulp 缩小和自动更新 CSS 文件

Question

我有一个 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");
  });
});

关于为什么这不起作用的任何想法？提前谢谢！

Answer 1

问题在于您在gulp.watch 回调函数中调用gulp.task('minify-css') 的区域。该代码实际上并没有调用 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'));

希望这会有所帮助。