使用 gulp 创建 CSS 文件，@imports 其他 CSS 文件

Question

我有一个 gulp 任务使用 gulp-sakugawa 将 CSS 文件拆分为多个 CSS 文件（因为 IE 6-9 的 4095 选择器限制） .

原文CSS：

app.css

拆分 CSS:

app_1.css
app_2.css
app_3.css
etc...

我需要 @import 将这些文件拆分成新创建的 CSS 文件 style.css，如下所示：

@import url('app_1.css');
@import url('app_2.css');
@import url('app_3.css');
//etc...

如何在以下任务中执行此操作？

gulp.task('splitCSS', function() {
  gulp.src(config.baseDir + '/assets/css/app.css')
    .pipe(gulpSakugawa({
       maxSelectors: 4000,
       mediaQueries: 'separate',
       suffix: '_'
    }))
    .pipe(gulp.dest(config.baseDir + '/assets/css/split'));
});

Answer 1

以下解决方案使用 through2 收集流中的所有文件，然后发出单个文件 style.css，其中包含所有文件的 @import 语句：

var through2 = require('through2');
var path = require('path');

function createCssImports() {
  var lastFile, files = [];
  return through2.obj(function(file, enc, cb) {
    files.push(path.basename(file.path));
    cb(null, lastFile = file);
  }, function (cb) {
    var file = lastFile.clone();
    file.contents = new Buffer(files.map(function(f) {
      return "@import url('" + f + "');"
    }).join('\n'));
    file.path = path.join(path.dirname(file.path), 'style.css');
    this.push(file);
    cb();
  });
}

gulp.task('splitCss', function() {
  return gulp.src(config.baseDir + '/assets/css/app.css')
     .pipe(gulpSakugawa({
        maxSelectors: 4000,
        mediaQueries: 'separate',
        suffix: '_'
     }))
     .pipe(createCssImports())
     .pipe(gulp.dest(config.baseDir + '/assets/css/split'));
});

使用 gulp 创建 CSS 文件，@imports 其他 CSS 文件

Create CSS file that @imports other CSS files using gulp

gulp

gulp-sass

gulp-imports