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?

possible duplicate of [CSS minify and rename with gulp](http://stackoverflow.com/questions/25764668/css-minify-and-rename-with-gulp) — Preview, Oct 09 '14 at 09:36
gulp-minify-css is deperecated now. https://www.npmjs.com/package/gulp-minify-css — Musa Haidari, Jun 08 '16 at 10:40

score 94 · Accepted Answer · answered Oct 09 '14 at 08:19

94

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/

answered Oct 09 '14 at 08:19

Modern Labs

1,027
8
6

2

is rename() function is not required here? – Dipendra Gurung Oct 09 '14 at 08:27
3

I think rename() is not required because you don't want to rename existing files. You only want to create a new file containing the concat data of all your existing files *.css – Modern Labs Oct 09 '14 at 08:30
2

You don't need a rename() since you're already defining the output filename (style.min.css) in the concat pipe. – Jae Barclay May 22 '16 at 12:06

score 3 · Answer 2 · answered Dec 04 '18 at 05:37

3

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/'))

});

answered Dec 04 '18 at 05:37

Seyed Abbas Seyedi

378
3
11

Why? What's the difference ? I just removed the gulp-css-plugin for this post, because I'm checking why when i compile the css left to work and I'm thinking that may could be the gulp-css-plugin – jircdeveloper Aug 05 '19 at 11:29
1

The gulp-minify-css package has been deprecated and author of the gulp-minify-css adviced all developers to use the gulp-clean-css plugin. – Seyed Abbas Seyedi Aug 07 '19 at 10:32

gulp minify all css files to a single file

2 Answers2

Linked