0

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.

quarky
  • 710
  • 2
  • 13
  • 36

1 Answers1

3

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'));    
});
Bill
  • 25,119
  • 8
  • 94
  • 125
  • This is the problem, because when I use two tasks and one of if is this gulp.task('minify-styles', ['styles'], function () { ... } then this do nothing also. Can you show me your code? – quarky Jan 22 '15 at 18:45
  • I mean that it would be better to run first task that only compile the CSS and after this run another task that use these CSSs and minify it. – quarky Jan 22 '15 at 18:47
  • This was my previous code, but it doesn't work for me - or it does but I found the problem. I'm using also useref plugin and I run minfy task before I run useref. So your code is OK but problem was elsewere. Thanks for help anyway. – quarky Jan 22 '15 at 19:48