How to minify css after concatanation? Issue when using Gulp

0
votes

I am using the following task in gulp in order to concatenate some CSS files.

Script runs fine and I am able to get a unique file "app-flat.css" with all CSS. But I am not able to minify "app-flat.css" using the following line

.pipe(minifyCss())

I need to minify the result of concat "app-flat.css".

Could you please tell me what is wrong in my script? Should I place .pipe(minifyCss()) as last process?

var gulp = require('gulp');
var gutil = require('gulp-util');
var connect = require('gulp-connect');
var open = require('open');
var jscs = require('gulp-jscs');
var jshint = require('gulp-jshint');
var stylish = require('gulp-jscs-stylish');
var sloc = require('gulp-sloc');
var complexity = require('gulp-complexity');

var stylus = require('gulp-stylus');
var nib = require('nib');
var concat = require('gulp-concat');
var header = require('gulp-header');
var fs = require('fs');
var merge = require('merge-stream');
var minifyCss = require('gulp-minify-css');
var gp_uglify = require('gulp-uglify');
    gulp.task('theme-flat', function () {
        gulp.src([
            'themes/a/a.css',
            'themes/b/b.css'])
          .pipe(concat('app-flat.css'))
          .pipe(minifyCss())  // problem here
          .pipe(header(fs.readFileSync('copyright.txt', 'utf8')))
          .pipe(gulp.dest('themes/flat/'));
    });

Notes: I can use another minifier like uglify or others as I am not limitate to only gulp-minify-css

2
cssgulpgulp-uglify
This will probably be of your help stackoverflow.com/questions/24591854/… – sailens
@sailens please note my script use gulp-minify-css thanks for your time on this – GibboK
Just to be sure : can you paste your var / require ? – enguerranws

2 Answers

2
votes

You Should add the the concat pipe :

gulp.src('src/css/**/*.css')
    .pipe(minifyCSS())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
    .pipe(concat('app-flat.css'))
    .pipe(gulp.dest('dist/css'))
0
votes

I think, call me out if i'm wrong. You're trying to minify the file after you've already created app-flat.css file. You need to pipe it through before you pipe concat

   gulp.task('theme-flat', function () {
        gulp.src([
            'themes/a/a.css',
            'themes/b/b.css'])
          .pipe(minifyCss())  // before you concat you're file
          .pipe(header(fs.readFileSync('copyright.txt', 'utf8')))
          .pipe(concat('app-flat.css'))
          .pipe(gulp.dest('themes/flat/'));
    });