gulp minify all css files to a single file

Question

I have gulp task script as following,

// loads various gulp modules var gulp = require('gulp'); var concat = require('gulp-concat'); var minifyCSS = require('gulp-minify-css'); var autoprefixer = require('gulp-autoprefixer'); var rename = require('gulp-rename');  // create task gulp.task('css', function(){     gulp.src('src/css/**/*.css')         .pipe(minifyCSS())         .pipe(rename('style.min.css'))         .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))         .pipe(gulp.dest('dist/css')) }); 

How to minify all the css files from src/css to a single file as dist/css/style.min.css?

Answer 1

I think better is used the cleancss gulp plugin.

const cleanCSS = require('gulp-clean-css');  // npm install gulp-clean-css --save-dev  gulp.task('css', () => {  return gulp.src('assets/styles/*.css')   .pipe(cleanCSS({       debug: true,       compatibility: 'ie8',       level: {           1: {               specialComments: 0,           },       },   }))   .pipe(autoprefixer({       browsers: ['last 2 versions'],       cascade: false   }))   .pipe(rename({       basename: 'main-styles',       suffix: '.min',   }))   .pipe(gulp.dest('dist/assets/styles/'))  }); 

Answer 2

Your gulp task is missing the concat pipe.

gulp.src('src/css/**/*.css')     .pipe(minifyCSS())     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))     .pipe(concat('style.min.css'))     .pipe(gulp.dest('dist/css')) 

Here is a very good tutorial about building with gulp:

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/