一饮而尽观看css并在变化中缩小

Question

我有下面的gulp文件，它将监视我的styles.scss文件并更新我的style.css文件。每次styles.css文件更新时，我都需要运行“”来缩小它。我想知道是否有一种方法可以“监视”styles.css文件并自动缩小它？

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const minifyCSS = require('gulp-minify-css');
const minify = require('gulp-minify');

 // complie scss into css
function style() {
// where is my scss file
return gulp.src('./css/scss/**/*.scss')
// pass that file through scss compiler
    .pipe(sass())
//where do i save the compiled css?
    .pipe(gulp.dest('./css'))

// stream changes to all browsers
.pipe(browserSync.stream());
 }

function minifycss() {

return gulp.src('./css/styles.css')
.pipe(minifyCSS())
.pipe(gulp.dest('css'))
}

function watch () {
browserSync.init({      
    
 });
gulp.watch('./css/scss/**/*.scss', style);
gulp.watch('./css/styles.css', minifycss);
 }

exports.style = style;
exports.minifycss = minifycss;


exports.watch = watch;

我看到了这篇文章Using Gulp to Minify and Auto Update a CSS File并编辑了我的gulp文件如下：

function minifycss() {

return gulp.src('./css/styles.css')
.pipe(minifyCSS())
.pipe(gulp.dest('css'))
}

gulp.task("minify-css", minifyCSS);
gulp.task("watch",  () => {
  gulp.watch("./css/*.css", minifyCSS);
});
gulp.task('default', gulp.series('minify-css', 'watch'));

但是，当我运行它时，我会得到以下错误：

您忘记发出异步完成的信号了吗？

这是我的口水细节：

CLI版本: 2.3.0 本地版本: 4.0.2

你知道我是怎么让它起作用的吗？

谢谢

Answer 1

在Gulp 4+中，任务默认为异步，因此需要在完成时发出信号。您可以返回任务以与其他任务连接，或者如果其他任务是独立的，只需发出信号，表示任务已经作为任务函数中的一个参数获得回调方法(下面我将其命名为done，但您可以使用任何您想要的名称)。

除此之外，要使用watch运行任务，您需要使用gulp.series()来指定任务。此外，由于watch不会立即返回，所以您应该使用watch和series也作为参数的结束信令方法。

因此，在您的例子中，代码应该是(我还没有测试它，但它应该能工作)：

gulp.task("minify-css", (done) => {
    gulp.src('./css/styles.css')
    .pipe(minifyCSS())
    .pipe(gulp.dest('css'));
    done();
});
gulp.task("watch",  (done) => {
  gulp.watch("./css/*.css", gulp.series(minifyCSS))(done);
});
gulp.task('default', (done) => gulp.series('minify-css', 'watch')(done));

如果对你有用的话请告诉我。