Gulp Autoprefixer不工作 [英] Gulp Autoprefixer Not Working

问题描述

我无法使Autoprefixer与Gulp一起工作。我在我的CSS，渐变和变换中使用不透明度，并且没有任何供应商前缀出现。

I'm unable to get Autoprefixer to work with Gulp. I'm using opacity in my CSS, gradients, and transforms and there aren't any vendor prefixes showing up. Otherwise, everything else is working.

Here's my gulp file:

var gulp = require('gulp');

var lr = require('tiny-lr');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var livereload = require('gulp-livereload');
var server = lr();
var plumber = require('gulp-plumber');

var onError = function (err) {  
  gutil.beep();
  console.log(err);
};

gulp.task('lint', function() {
    return gulp.src('js/all.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 2 versions', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});


gulp.task('scripts', function() {
    return gulp.src(['js/fittext.js', 'js/fitvids.js', 'js/snap-scroll.js', 'js/cycle-min.js', 'js/all.js', 'js/respond.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('**/*.php').on('change', livereload.changed);
    gulp.watch('js/*.js', ['scripts']);
    gulp.watch('scss/**/*.scss', ['sass']);  
});

gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

• 我已经搜索并尝试了解决这个问题的各种解决方案。我也尝试将 .pipe（gulp.dest（''））更改为特定目录（如这个答案建议为），没有任何运气。
  
  • I've searched and tried various solutions to this problem without avail. I've also tried changing .pipe(gulp.dest('')) to a specific directory (like this answer suggested), without any luck.

  感谢您提供的任何帮助。

  I appreciate any help you can offer.

  *更新*
  
  

  / div>

  这个gulpfile：

  This gulpfile:

  var gulp = require('gulp');
  var sass = require('gulp-sass');
  var prefix = require('gulp-autoprefixer');
  var minify = require('gulp-minify-css');
  var plumber = require('gulp-plumber');
  
  function onError(err) {
      console.log(err);
  }
  
  gulp.task('sass', function(){
      return gulp.src('src/style.scss')
          .pipe(sass())
          .pipe(prefix('last 2 versions'))
          .pipe(minify())
          .pipe(gulp.dest('css/'))
          .pipe(plumber({
              errorHandler: onError
          }))
  });
  

  有了这个scss：
  
  

  With this scss:

  body {
      opacity: .5;
      box-sizing: border-box;
      transform: scale(.5);
      display: flex;
  }
  

  生成此输出：

  body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
  

  所以，我不确定我在做什么不同，除了我以不同的方式列出我的浏览器。但我想你已经尝试删除这些等。

  So, I'm not sure what I'm doing different exactly except that I list my browsers differently. But I assume you've tried removing those etc.

  这篇关于Gulp Autoprefixer不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！