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

It might not be the best way, but I use two different gulp tasks. One task that compiles the CSS into my build directory and then another task takes that output and minifies it into my dist directory. Use a task dependency to ensure that the file gets built before the minify task runs.

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