gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:45:25 24 4
gpt4 key购买 nike

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

关于为什么这不起作用的任何想法?提前致谢!

最佳答案

问题在于您在 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'));

希望这对您有所帮助。

关于javascript - 使用 Gulp 缩小和自动更新 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53366997/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com