Bootstrap-sassとBootstrap.cssのブラウザ互換性

Question

学習の練習として、新しいASP.NET MVC 4.5アプリケーションがVisual Studio 2013で作成されたときにデフォルトで含まれるNuget Bootstrap、jQuery、その他のデフォルトパッケージを取り出しました代わりにGulpを使ってこれらのパッケージを提供しています。 （なぜ？私はそれが将来の練習になると聞いたので、私はそれを学ぶために時間と贅沢を持っている間頭を下げ始めている）

私のgulpfileはgulp-sassを必要とし、ブートストラップのscssソースファイルは正常にコンパイルされ、指定されたフォルダに正しく配置されていれば、解決できなかった問題が残ります。

Visual StudioでBootstrap.cssフォルダを開くと、私には見たいコンテンツが表示されますが、「ブラウザの互換性：標準プロパティが不足しています」、 ...はベンダー固有の有効なプロパティではありません "、など。このスクリーンショットは、ファイル内で見つかった警告のサブサンプルです。

私は様々なブログ、SOの答え、と一息-SASSページを見ていると、このgulp.taskを出してきました。 PowerShellでgulpを実行するとエラーが発生しなくても正常に完了しますが、パッケージが見つからない場合や、不足しているベンダータグとブラウザの互換性タグを正しく追加するタスクが不足しているのではないでしょうか。

ここには、私のgulpfileからの抜粋が掲載されています。それは大きなファイルなので、書かれたことを正しく行うコードの他の部分は含めません。

gulp.taskを改善して正しいBootstrap.cssファイルを生成するにはどうすればよいですか？

'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

は、ここで私は別のIEのバージョンをターゲットにautoprefixerに使用してんですよ。 gulp-load-pluginsもチェックして、すべてのノードモジュール用にオブジェクトを作成する必要はありません。

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')); 

}）;