gulp: How do i pipe a css file in between scss fil

Question

this is my current code part in gulpfile.js:

// Sass 
gulp.task('sass', function () {
  gulp.src(['./node_modules/bootstrap/scss/bootstrap.scss', './node_modules/startbootstrap-full-slider/css/full-slider.css' ,'./sass/**/*.scss'])
    .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(sourcemaps.write('./'))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./'));
});

I am trying to add "full-slider.css` file in between, to minify and combine (in that order).

the content of full-slider.css is not added to the final style.css

edit:

Tried using gulp-cssnano: this way:

var gulp = require('gulp');
var livereload = require('gulp-livereload')
var uglify = require('gulp-uglifyjs');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var fs = require('fs');
var concat = require('gulp-concat');
var cssnano = require('gulp-cssnano');

gulp.task('sass', function () {

    gulp.src(['./node_modules/bootstrap/scss/bootstrap.scss', './sass/**/*.scss'])
    .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(sourcemaps.write('./'))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./'));

    gulp.src(['style.css', './node_modules/startbootstrap-full-slider/css/full-slider.css'])
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(cssnano())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./'));

});

gulp sass

[16:11:45] Using gulpfile /var/www/test.dev/wp-content/themes/olympos/gulpfile.js [16:11:45] Starting 'sass'... [16:11:45] Finished 'sass' after 23 ms

events.js:141 throw er; // Unhandled 'error' event ^ CssSyntaxError: /var/www/test.dev/wp-content/themes/olympos/bootstrap.scss:1:0: Missed semicolon> 1 | /*! | ^ 2 | * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) 3 | * Copyright 2011-2017 The Bootstrap Authors

when i comment the part:

    gulp.src(['style.css', './node_modules/startbootstrap-full-slider/css/full-slider.css'])
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(cssnano())
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./'));

it compiles smoothly, where is my mistake?

(theory: might this happen because of the output for the sourcemap in the generated new css file? )

Answer 1

Initially I thought that the best way would be to copy the CSS file to a new location in your project files (using gulp.dest()), set the file name to have an .scss extension and then run the gulp.sass() pipe again.

However, this isn't really using gulp-sass as it's supposed to be used (it's not a file concatenator). A better way would be to do something like this (bear in mind I haven't got time to practically test this so it may not work. Apologies.):

gulp.task('sass', function () {
  gulp.src(['./node_modules/bootstrap/scss/bootstrap.scss', './sass/**/*.scss'])
  .pipe(sourcemaps.init())
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(sourcemaps.write('./'))
  .pipe(concat('style.css'))
  .pipe(gulp.dest('./'));
  gulp.src(['style.css', './node_modules/startbootstrap-full-slider/css/full-slider.css'])
  .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
  .pipe(cssnano())
  .pipe(concat('style.css'))
  .pipe(gulp.dest('./'));
});

That probably isn't perfect, and I also realised as I was writing this that you wanted the fullslider.css file to be included after bootstrap but before your project files. Further this doesn't use sourcemaps for the second sub-task. As you can probably tell, I haven't written gulp tasks for a while! But if you have time, maybe something to play around with.

P.S cssnano() refers to gulp-cssnano.