Блог

У меня есть задача gulp разделить файл CSS на несколько файлов CSS (из-за ограничения 4095 селекторов для IE 6-9) с помощью gulp-sakugawa .

Оригинальный 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'));
});
  

Следующее решение использует 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'));
});