創建使用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')); 
});