创建使用gimp @输入其他CSS文件的CSS文件

Question

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

原始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')); 
});