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

时间:2016-05-31 01:06:21

标签: gulp gulp-sass bootstrap-sass

作为一个学习练习,我已经取出了Nuget Bootstrap,jQuery,以及在使用Visual Studio 2013创建新的ASP.NET MVC 4.5应用程序时默认包含的其他默认包。相反,我使用Gulp提供那些包裹。 (为什么?因为我听说这将是未来的练习,所以我有一个良好的开端,而我有时间和奢侈的学习它。)

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

当我在Visual Studio中打开Bootstrap.css文件夹时,我看到了我希望看到的内容,但我也看到了大部分内容的警告,例如"浏览器兼容性:添加缺少的标准属性&# 34;," ...不是有效的供应商特定属性",依此类推。此屏幕截图是我在文件中找到的警告的子样本。

Bootstrap.css with warnings

我查看了各种博客,SO答案和gulp-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));
});

1 个答案:

答案 0 :(得分:1)

这是我用autoprefixer定位不同IE版本的内容。另请查看gulp-load-plugins,这样您就不需要为所有节点模块创建对象。

{{1}}

});