1

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

3 回答 3

2

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

  2. 有一项任务，两者兼而有之！

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

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

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

于 2015-04-01T13:37:43.700 回答
1

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

于 2016-06-02T12:30:34.833 回答
0

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

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

于 2016-11-03T04:49:59.493 回答