javascript - 使用 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'));

希望这对您有所帮助。