Bootstrap-sass 和 Bootstrap.css 浏览器兼容性

Question

作为学习练习，我已经删除了 Nuget Bootstrap、jQuery、创建新的 ASP.NET MVC 4.5 应用程序时默认包含的其他默认包Visual Studio 2013。相反，我使用 Gulp 来提供这些包。（为什么？因为我听说这将是未来的实践，所以我在有时间和奢侈的情况下开始学习它。）

我的 gulp 文件需要 gulp-sass，虽然 Bootstrap scss 源文件已成功编译并正确放置在指定文件夹中，但我发现还有一个问题是我一直没能解决。

当我打开 Visual Studio 中的 Bootstrap.css 文件夹时，我看到了我希望看到的内容，但我也看到了很多内容的警告，例如 "Browser compatibility: add missing standard property" ，“...不是有效的供应商特定属性”，等等。此屏幕截图是我在文件中找到的警告的子样本。

我查看了各种博客、SO 答案和 gulp-sass 页面并得出了这个 gulp.task。虽然 PowerShell 中的运行 gulp 成功完成且没有错误，但我想知道我是否遗漏了任何包，或者我是否在任务中遗漏了可以正确添加缺少的供应商标签和浏览器兼容性标签的内容。

以下是我的 gulp 文件中的相关摘录，灵感来自在线现有示例。这是一个大文件，所以我没有包括代码的其他部分，这些部分正确地完成了他们所写的事情。

如何改进 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

以下是我用于 autoprefixer to target different IE versions. Also check out 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'));

});

Bootstrap-sass 和 Bootstrap.css 浏览器兼容性

Bootstrap-sass and Bootstrap.css browser compatibility

bootstrap-sass

gulp

gulp-sass