【问题标题】:Gulp - AutoPrefixer not working as expectedGulp - AutoPrefixer 没有按预期工作
【发布时间】:2016-10-08 12:19:56
【问题描述】:

我在我的项目中使用 Gulp,并希望使用自动前缀。

我目前的gulp文件如下:

    // Include gulp
var gulp = require('gulp');
 // Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');


 // Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
      .pipe(concat('main.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('build/js'));
});


 gulp.task('sass', function() {
    return sass('scss/style.scss', {style: 'compressed'})
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('build/css'));
});




 gulp.task('images', function() {
  return gulp.src('images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
    .pipe(gulp.dest('build/img'));
});


 gulp.task('watch', function() {
   // Watch .js files
  gulp.watch('js/*.js', ['scripts']);
   // Watch .scss files
  gulp.watch('scss/*.scss', ['sass']);
   // Watch image files
  gulp.watch('images/*', ['images']);
 });


// Default Task
gulp.task('default', ['scripts', 'sass', 'images', 'watch']);

如您所见,我有一个 .sass 任务,它按预期工作。我现在添加了

.pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))

在它被缩小到一个 min.css 文件之前。现在,当我运行它时,一切似乎都很好。但例如,当我保存这段代码时:

 .test{
    transform: scale(.5);
}

我希望将 -webkit-versions 等添加到我的 min.css 文件中,但由于某种原因它没有。有谁知道错误可能出在哪里?

【问题讨论】:

  • 它从不添加-webkit-prefix吗?也许有些规则不需要最后 2 个浏览器版本的前缀...
  • 它只是不添加任何东西,只是变换:scale(.5);
  • 自动前缀使用来自 caniuse.com 的数据库。 On caniuse 表示浏览器的最后 2 个版本不支持“-webkit-”前缀。如果您需要支持一些非常旧的前缀,请输入最后 40 个版本,或类似的东西。最后支持的版本:caniuse.com/#search=transform%3A%20scale

标签: css npm sass gulp


【解决方案1】:

尝试使用它。它非常适合我。

.pipe(autoprefixer({
   browsers: ['last 2 version', 'safari 5', 'ie 6', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
}))

【讨论】:

  • 能否请您为您的答案添加更多上下文。仅代码的答案很难理解。如果您可以在帖子中添加更多信息,这将对提问者和未来的读者都有帮助。
猜你喜欢
  • 1970-01-01
  • 2017-09-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-19
  • 2020-03-18
  • 2012-06-14
相关资源
最近更新 更多