How to concatenate CSS files with Gulp?

Question

I want to concat css files like I do with my JS files and I seem to miss something regarding the process.

My code and its results:

Consts/dependencies:

const config = require('./src/config');
const isProduction = config.isProduction;
const gulp = require('gulp')
    , concat = require('gulp-concat')
    , minify = require('gulp-minify')
    , uglify = require('gulp-uglify')
    , concatCss = require('gulp-concat-css')
    , buffer = require('gulp-buffer')
    , rename = require('gulp-rename')
    , request = require('request')
    , source = require('vinyl-source-stream')
    , merge = require('merge2')
const index_dest = './public_html/';
const main_app_script = './dist/main.min.js';
const header_styles = './dist/head_styles.min.css';

when I try this it works for JS files:

gulp.task('merge_scripts', () => {
    if (isProduction) {
        const libraries = gulp.src([...underscore, ...angular, ...indexPageFiles]).pipe(concat('app_user_controllers.js', {newLine: '\r\n'}));
        const loki = request('https://cdnjs.cloudflare.com/ajax/libs/lokijs/1.3.16/lokijs.min.js').pipe(source('./public_html/dist/loki.js'));
        const app_user_controllers = gulp.src([...misc, ...appConfigFiles]).pipe(concat('libraries.js', {newLine: '\r\n'}));
        return merge(libraries, loki, app_user_controllers)
            .pipe(buffer())
            .pipe(concat('temp', {newLine: '\r\n'}))
            .pipe(minify())
            .pipe(uglify())
            .pipe(rename(main_app_script))
            .pipe(gulp.dest(index_dest));
    }
});

result: I get a correct main.min.js that contains all JS I need.

When I try to do something similar for CSS files it doesn't work:

gulp.task('merge_head_styles', () => {
    if (isProduction) {
        const head_before_fonts = gulp.src(basic.map(css => { return css.path })).pipe(source('temp1.css'));
        const fonts = request('https://fonts.googleapis.com/css?family=Source+Sans+Pro').pipe(source('temp2.css'));
        const head_after_fonts = gulp.src([...beyond, ...custom].map(css => { return css.path })).pipe(source('temp3.css'));
        return merge(head_before_fonts, fonts, head_after_fonts)
            .pipe(buffer())
            .pipe(concatCss('temp_head_styles'))
            .pipe(rename(header_styles))
            .pipe(gulp.dest(index_dest));
    }
});

result: I get a head_styles.min.css file that contains only a part from the css in the fonts link:

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url("https://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNzbP97U9sKh0jjxbPbfOKg.ttf") format('truetype');
}

instead of all css concatenated.

right now i don't want to minify/uglify my css files, only to concat them to a single file.

What am I doing wrong in my code?

Answer 1

vinyl-source-stream is used to generate a vinyl file stream from a regular character stream.

For example request() returns a character stream so you need source() to turn it into a vinyl stream.

However gulp.src() already returns a stream of vinyl files, so source() is useless here. You probably want to use concat() instead (as you do in your merge_scripts task).

So these two lines:

 const head_before_fonts = gulp.src(basic.map(css => { return css.path })).pipe(source('temp1.css'));
 const head_after_fonts = gulp.src([...beyond, ...custom].map(css => { return css.path })).pipe(source('temp3.css'));

Should be this instead:

 const head_before_fonts = gulp.src(basic.map(css => { return css.path })).pipe(concat('temp1.css'));
 const head_after_fonts = gulp.src([...beyond, ...custom].map(css => { return css.path })).pipe(concat('temp3.css'));

Not sure how you were able to get any output at all though, since vinyl-source-stream throws an exception if the input isn't a character stream.