gulp：如何在 scss 文件之间通过管道传输 css 文件？ gulp.src(['sassfile1.scss', 'cssfile.css','sassfile2.scss'])

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.

PS cssnano() refers to gulp-cssnano .