使用 gulp 创建 @imports 其他 CSS 文件的 CSS 文件答案

【问题标题】：Create CSS file that @imports other CSS files using gulp使用 gulp 创建 @imports 其他 CSS 文件的 CSS 文件
【发布时间】：2016-10-19 20:28:50
【问题描述】：

我有一个使用 gulp-sakugawa 将 CSS 文件拆分为多个 CSS 文件的 gulp 任务（因为 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'));
});

【问题讨论】：

标签： gulp gulp-sass gulp-imports

【解决方案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'));
});

【讨论】：