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创建@imports其他CSS文件的CSS文件

1 个答案: