css - Gulp minify-css only for distribution

Question

How can I minify CSS generated from LESS only to 'dist' folder? Of course all gulp plugins are corretly installed. Everything goes OK except minifying CSS. Here is my code:

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'));
});

If I move .pipe(minifyCSS({keepBreaks:false})) one line above it works. But I need to have compressed CSS only in dist forlder.

Thanks for advice.

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'));    
});