Bootstrap-sass und Bootstrap.css Browserkompatibilität

Question

Als Lernübung habe ich die Nuget Bootstrap, jQuery, andere Standardpakete herausgenommen, die standardmäßig enthalten sind, wenn eine neue ASP.NET MVC 4.5-Anwendung mit Visual Studio 2013 erstellt wird Stattdessen benutze ich Gulp, um diese Pakete zu liefern. (Warum? Weil ich gehört habe, dass es zukünftige Praxis wird, und so bekomme ich einen Vorsprung, während ich die Zeit und den Luxus habe, es zu lernen.)

Meine gulpfile erfordert gulp-sass, und während die Bootstrap scss-Quelldateien sind erfolgreich kompiliert und richtig in den angegebenen Ordner platziert, finde ich, dass es ein verbleibendes Problem gibt, das ich nicht lösen konnte.

Wenn ich den Bootstrap.css-Ordner in Visual Studio öffne, sehe ich den Inhalt, den ich erwarten würde, aber ich sehe auch Warnungen über einen Großteil des Inhalts, wie "Browserkompatibilität: fehlende Standardeigenschaft hinzufügen", " ... ist keine gültige herstellerspezifische Eigenschaft "und so weiter. Dieser Screenshot ist eine Untergruppe der Warnungen, die ich in der Datei gefunden habe.

Ich habe in verschiedenen Blogs sieht, SO Antworten, und die großen Schluck-Sass-Seiten und haben dieses gulp.task erarbeitet. Während die Ausführung von gulp in PowerShell erfolgreich ohne Fehler abgeschlossen wird, frage ich mich, ob ich irgendwelche Pakete vermisse oder ob etwas in der Aufgabe fehlt, die die fehlenden Vendor-Tags und Browserkompatibilitäts-Tags korrekt hinzufügen würde.

Hier sind die relevanten Auszüge aus meiner gulpfile, inspiriert von den verfügbaren Beispielen online vorhanden. Es ist eine große Datei, also schließe ich die anderen Teile des Codes nicht ein, die das tun, wozu sie geschrieben wurden.

Wie kann ich die gulp.task verbessern, so dass es die richtigen Bootstrap.css-Dateien erzeugt?

'use strict'; 

// Require declarations 

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

var autoprefixer = require('gulp-autoprefixer'); 
var bower = require('gulp-bower'); 
var concat = require('gulp-concat'); 
var del = require('del'); 
var cleancss = require('gulp-clean-css'); 
var jshint = require('gulp-jshint'); 
var maps = require('gulp-sourcemaps'); 
var uglify = require('gulp-uglify'); 
var postcss = require('gulp-postcss'); // just added  

// Read bootstrap scss source files from bower_components 
var bootstrapStyleSrc = 'bower_components/bootstrap-sass/assets/stylesheets/**/*.scss'; 
var cssDist = 'Content/Dist/App' 

gulp.task('bootstrap-css', ['clean-styles', 'bower-restore'], function() { 
    return gulp.src(bootstrapStyleSrc) 
     .pipe(maps.init()) 
     .pipe(sass())         
     .pipe(postcss([autoprefixer({ browsers: ['last 2 versions'] })])) 
     .pipe(maps.write('.')) 
     .pipe(gulp.dest(cssDist)); 
}); 

Answer 1

Hier ist, was ich für autoprefixer mit verschiedenen IE-Versionen zielen. Überprüfen Sie auch gulp-load-plugins, so dass Sie keine Objekte für alle Knotenmodule erstellen müssen.

var gulp = require('gulp'), 
     $ = require('gulp-load-plugins')(); 

gulp.task('css', function() { 
return gulp.src('./assets/css') 
    .pipe($.sass()) 
    .pipe($.autoprefixer({ 
     browsers: ['> 1%', 'last 2 versions', 'firefox >= 4', 'safari 7', 'safari 8', 'IE 8', 'IE 9', 'IE 10', 'IE 11'], 
     cascade: false 
    })) 
    .pipe($.cleanCss()) 
    .pipe(gulp.dest('./dest')); 

});