How to combine several css files into one on Gulp?

Question

gulp.js

Hello, how to combine multiple css files into one file using gulp ?

Answer 1

Just gulp-concat is enough

Answer 2

# npm install gulp gulp-concat gulp-jsmin main-bower-files gulp-less gulp-sass gulp-minify-css merge-stream gulp-util gulp-iconfont gulp-flatten

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    jsmin = require('gulp-jsmin'),
    mainBowerFiles = require('main-bower-files'),
    less = require('gulp-less');
    sass = require('gulp-sass');
    minify = require('gulp-minify-css');
    merge = require('merge-stream');
    gutil = require('gulp-util');

gulp.task('build_style', ['build_icons'], function() {

  var lessStream = gulp.src(mainBowerFiles(['**/*.less'],{debugging:true}))
  .pipe(less())
      .pipe(concat('less-files.less'))
  ;

  var scssStream = gulp.src(mainBowerFiles(['**/*.scss'],{debugging:true}))
  .pipe(sass())
      .pipe(concat('scss-files.scss'))
  ;

  var cssStream = gulp.src(mainBowerFiles(['**/*.css'],{debugging:true}))
  .pipe(concat('css-files.css'))
  ;
  
  var customStyle = gulp.src(['web/assets/custom/style/*.scss'])
  .pipe(sass())
      .pipe(concat('scss-files-custom.scss'))
  ;

  var mergedStream = merge(lessStream, scssStream, cssStream, customStyle)
      .pipe(concat('all.min.css'))
      .pipe(minify())
      .pipe(gulp.dest('./web/assets/compiled/style'));

  return mergedStream;
});

Remove unnecessary dependencies, there are a lot of tasks.