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

ghhaqwfi 于 2022-12-08 发布在 Gulp

关注(0)|答案(3)|浏览(158)

我设置了一个非常简单的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

来源：https://stackoverflow.com/questions/29389145/gulp-minify-css-does-not-produce-output-files

3条答案

按热度按时间

pbgvytdp1#

听起来像是一个竞争条件。Sass和MinifyCSS是并行执行的，当你已经运行MinifyCSS时，你的Sass任务可能还没有完成。Sass应该是一个依赖项，所以你有两个选择：
1.使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']);
});

1.有一个任务，做这两个！

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

后者实际上是首选版本，如果没有中间结果，可以保存很多时间
顺便说一句：不要忘记return语句

赞(0）回复(0）举报 2022-12-08

rsaldnfx2#

我知道这是一个老问题，但我想我还是把它扔在那里，因为它对我有帮助。为了在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进行调试并部署缩小的版本。

赞(0）回复(0）举报 2022-12-08

col17t5w3#

这是因为gulp-minify-css已经被弃用了。请改用gulp-clean-css。
单击此处（https://www.npmjs.com/package/gulp-minify-css“npm-clean-css”）！

赞(0）回复(0）举报 2022-12-08