Gulp minify-css 仅用于分发

Question

如何将从 LESS 生成的 CSS 缩小到"dist"文件夹？当然，所有 gulp 插件都是相应地安装的。除了缩小 CSS 之外，一切都很顺利。这是我的代码：

gulp.task('styles', function () {
    return gulp.src('app/less/*.less')
            .pipe($.less())
            .pipe(gulp.dest('.tmp/styles'));
            .pipe(minifyCSS({keepBreaks:false}))
            .pipe(gulp.dest('dist/styles'));
});

如果我.pipe(minifyCSS({keepBreaks:false}))上面的一行移动，它可以工作。但是我只需要在dist forlder中压缩CSS。

谢谢你的建议。

Answer 1

这可能不是最好的方法，但我使用两个不同的 gulp 任务。 一个任务将 CSS 编译到我的构建目录中，然后另一个任务获取该输出并将其缩小到我的 dist 目录中。 使用任务依赖项可确保在运行 minify 任务之前生成文件。

gulp.task('styles', function() {
  return gulp.src(styles)
    .pipe(concat('app.less'))
    .pipe(gulp.dest('./build/styles'))
    .pipe(less())
    .on('error', console.log)
    .pipe(concat('app.css'))
    .pipe(gulp.dest('./build/styles'));
});
gulp.task('styles-dist', ['styles'], function() {
  return gulp.src('build/styles/app.css')
    .pipe(minifycss())
    .pipe(gulp.dest('./dist/styles'));    
});