Gulp-minify-css 不产生输出文件

Question

我设置了一个非常简单的 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']);
});

Answer 1

听起来像是竞争条件。 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/'));
});

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

顺便说一句：不要忘记 return 语句

Answer 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 进行调试并部署缩小的版本。

Answer 3

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

单击此处(https://www.npmjs.com/package/gulp-minify-css"npm-clean-css")！

Gulp-minify-css 不产生输出文件

Gulp-minify-css does not produce output files

gulp

gulp-watch

gulp-sass