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

Question

这是我当前在 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('./'));
});

我正在尝试在两者之间添加“full-slider.css”文件，以缩小和合并(按此顺序)。

full-slider.css的内容没有加入到最终的style.css中

编辑:

尝试使用 gulp-cssnano:这样:

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

当我评论部分时:

    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('./'));

编译顺利，我哪里错了？

(理论:这可能是因为生成的新 css 文件中的 sourcemap 的输出导致的？)

Answer 1

最初我认为最好的方法是将 CSS 文件复制到元素文件中的新位置(使用 gulp.dest())，将文件名设置为 .scss 扩展，然后再次运行 gulp.sass() 管道。

但是，这并不是真正使用 gulp-sass，因为它应该被使用(它不是文件连接器)。更好的方法是做这样的事情(请记住，我没有时间实际测试它，所以它可能行不通。抱歉。):

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('./'));
});

这可能并不完美，而且我在撰写本文时也意识到您希望在引导之后但在元素文件之前包含 fullslider.css 文件。此外，这不会为第二个子任务使用 sourcemaps。您可能会说，我已经有一段时间没有编写 gulp 任务了!但如果你有时间，也许可以玩点东西。

P.S cssnano() 指的是gulp-cssnano .