Gulp-minify-css 不生成输出文件答案

【问题标题】：Gulp-minify-css does not produce output filesGulp-minify-css 不生成输出文件
【发布时间】：2015-04-01 11:05:11
【问题描述】：

我设置了一个非常简单的gulpfile.js 只有两个任务 - 'sass' 和 'minify-js'。当检测到更改时，这两个任务由任务“watch”触发。一切似乎都运行良好：Gulp 正在监听变化，*.scss 文件被编译成 CSS，控制台按预期生成输出，没有任何错误。但是，CSS 文件没有被缩小，“minify-css”任务没有任何输出文件。

为什么'minify-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']);
});

【问题讨论】：

标签： gulp gulp-watch gulp-sass

【解决方案1】：

听起来像是一种竞争条件。 Sass 和 MinifyCSS 是并行执行的，可能是你的 Sass 任务在你已经运行 MinifyCSS 时没有完成。 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/'));
});

后者实际上是首选版本。如果没有中间结果，可以为自己节省很多时间

顺便说一句：不要忘记返回语句

【讨论】：

这是正确的答案。我只需要使 ['sass'] 成为一个依赖项。我选择了第一个选项，因为我需要中间结果。顺便说一句，我只是想知道一些任务在匿名函数中需要return，而其他任务则不需要。这在不同 gulp 插件的使用示例中甚至很明显。为什么会出现这种不一致？
return 语句告诉 Gulp 你使用了一个流，这样的 Gulp 能够更好地安排任务的并行执行。另一种方法是使用 done 回调。您的监视任务不需要一个，因为gulp.watch 调用将是唯一执行的语句，无需编排。
@ddprrt 我尝试了第二个版本，但系统告诉我没有 gulp watch。我应该把 gulp 手表放在哪里？

【解决方案2】：

我知道这是一个老问题，但我想我会把它扔在那里，因为它对我有帮助。为了建立 ddprrt 的答案，我建议更改：

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

到：

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/'));
});

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

【讨论】：

【解决方案3】：

这是因为 gulp-minify-css 已被弃用。请改用 gulp-clean-css。

点击这里（https://www.npmjs.com/package/gulp-minify-css“npm-clean-css”）！

【讨论】：