Question

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

为什么＆＃39; minify-css＆＃39;不工作？我在这里缺少什么？

这是我的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/'));
});

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

顺便说一句：不要忘记退货声明

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不生成输出文件

3 个答案: