Gulp minify css不生成输出文件

我已经设置了一个非常简单的

gulpfile.js

只有两个任务--“sass”和“minify js”。检测到更改时，任务“监视”将触发这两个任务。一切似乎都很好：Gulp正在监听更改，*.scss文件被编译成CSS，控制台按预期生成输出，没有任何错误。但是，CSS文件不会缩小“缩小CSS”任务中没有任何输出文件

为什么“缩小css”不起作用？我错过了什么

这是我的gulpfile.js：

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-minify-css');

gulp.task('sass', function() {
    gulp.src('plugins/SoSensational/styles/sass/*.scss')
            .pipe(sass())
            .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

gulp.task('minify-css', function() {
    gulp.src('plugins/SoSensational/styles/dest/*.css')
            .pipe(minifyCSS())
            .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

gulp.task('watch', function() {
    gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['sass', 'minify-css']);
});

---

听起来像是比赛条件。Sass和MinifyCSS是并行执行的，这可能是因为当您已经运行MinifyCSS时，Sass任务没有完成。Sass应该是一个依赖项，因此您有两个选项：

使Sass成为minifycss的依赖项：

gulp.task('minify-css', ['sass'], function() {
    return gulp.src('plugins/SoSensational/styles/dest/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

gulp.task('watch', function() {
     gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['minify-css']);
});

有一个任务可以同时完成这两个任务

gulp.task('sass', function() {
     return gulp.src('plugins/SoSensational/styles/sass/*.scss')
         .pipe(sass())
         .pipe(minifyCSS())
         .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

后者实际上是首选版本。如果没有中间结果，你会节省很多时间

---

顺便说一句：别忘了返回语句

我知道这是一个老问题，但我想我会把它扔出去，因为它对我有帮助。根据ddprrt的答案，我建议更改：

gulp.task('sass', function() {
     return gulp.src('plugins/SoSensational/styles/sass/*.scss')
         .pipe(sass())
         .pipe(minifyCSS())
         .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

致：

---

这允许您调试未缩小的CSS并部署缩小的版本。

这是因为gulp minify CSS已被弃用。改用大口喝干净的css

---

点击这里（“npm清洁css”）

这是正确的答案。我只需要做一个依赖项。我选择了第一个选项，因为我需要中间结果。顺便说一下，我只是想知道一些任务需要在匿名函数中返回

return

，而其他任务则不需要。这甚至在不同的gulp插件的使用示例中也很明显。为什么会出现这种不一致？return语句告诉Gulp您使用了一个流，这样的Gulp能够更好地安排任务的并行执行。另一种方法是使用done回调。您的watch任务不需要一个，因为执行的语句只有

gulp.watch

调用，无需编排该语句。@ddprrt我尝试了第二个版本，但系统告诉我没有gulp watch。我应该把手表放在哪里？

var rename = require('gulp-rename');

gulp.task('sass', function() {
     return gulp.src('plugins/SoSensational/styles/sass/*.scss')
         .pipe(sass('site.css'))
         .pipe(gulp.dest('plugins/SoSensational/styles/dest/'))
         .pipe(minifyCSS())
         .pipe(rename('site.min.css'))
         .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});