Gulpの自動プレフィッカーがプレフィックスを使用していません

Question

私の自動プレフィックサーは、コンパイルされたCSSに必要なプレフィックスを追加していません。私は、スタックの記事など、さまざまな記事を読み、含む注文とタスクのバリエーション変更しようとしました：これは私のGULPファイルです

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

を：

var 
      gulp   = require('gulp'), 
      compass  = require('gulp-compass'), 
      autoprefixer = require('gulp-autoprefixer'), 
      concat  = require('gulp-concat'), 
      notify  = require('gulp-notify'), 
      livereload = require('gulp-livereload'), 
      plumber  = require('gulp-plumber'), 
      path   = require('path'); 

     // the title and icon that will be used for the Grunt notifications 
     var notifyInfo = { 
      title: 'Gulp', 
      icon: path.join(__dirname, 'gulp.png') 
     }; 

     //error notification settings for plumber 
     var plumberErrorHandler = { errorHandler: notify.onError({ 
       title: notifyInfo.title, 
       icon: notifyInfo.icon, 
       message: "Error: <%= error.message %>" 
      }) 
     }; 

     // The default task (called when you run `gulp` from cli) 
     gulp.task('default', ['watch']); 

     // CSS 
     gulp.task('css', function() { 

      return gulp.src('./src/scss/**/*') 
       .pipe(plumber(plumberErrorHandler)) 
       .pipe(compass({ 
       config_file: './src/config.rb', 
       css: './css', 
       sass: './src/scss' 
       })) 
       .pipe(autoprefixer('last 2 version'))  
       .pipe(gulp.dest('./css')); 

     }); 

     // JS 
     gulp.task('js', function() { 
      var scripts = [ 
       './src/js/no-conflict.js', 
       //'./node_modules/owl-carousel-2/owl.carousel.js', 
       './src/js/jquery.fancybox.pack.js', 
       './src/js/wow.js', 
       './src/js/frontend.js' 
      ]; 

      gulp.src(scripts) 
       .pipe(concat('script.js')) 
       .pipe(gulp.dest('./js')) 
       .pipe(notify({ message: 'Successfully compiled JavaScript' })); 

     }); 

     // Images 
     gulp.task('images', function() { 
     }); 

     // Fonts 
     gulp.task('fonts', function() { 
     }); 

     // Watch 
     gulp.task('watch', function() { 

      //livereload(); 

      //livereload.listen(); 

      // Watch .scss files 
      gulp.watch('./src/scss/**/*.scss', ['css']); 

      // Watch .js files 
      gulp.watch('./src/js/**/*.js', ['js']); 

      // Reload when template file, css or js file changes 
      var watchlist = [ 
       './css/style.css', 
       './js/frontend.js' 
      ]; 

      gulp.watch(watchlist, function(event) { 
       gulp.src(event.path) 
        .pipe(plumber()) 
        .pipe(livereload()) 
        .pipe(notify({ 
          title: notifyInfo.title, 
          icon: notifyInfo.icon, 
          message: event.path.replace(__dirname, '').replace(/\\/g, '/') + ' was ' + event.type + ' and reloaded' 
         }) 
        ); 
      }); 
     }); 

するいくつかのいずれかが正しい方向に私を指すことができますお願いします？

Answer 1

設定が正しいように見えます。実行中の自動プレフィクサーのバージョンは何ですか？私は "gulp-autoprefixer"： "^ 3.1.0"は最新だと思う。コメントアウトしてみましたか？

.pipe(plumber(plumberErrorHandler)) 
       .pipe(compass({ 
       config_file: './src/config.rb', 
       css: './css', 
       sass: './src/scss' 
       })) 

あなたのタスクを再実行しましたか？

は、ノードモジュールcssnanoをインストールしてくださいし、このに行くを与える：

gulp.task('styles',() => { 
    return gulp.src('./src/scss/**/*') 
    .pipe(sass({style: 'compressed'}).on('error', sass.logError)) 
    .pipe(autoprefixer('last 4 version')) 
    .pipe(cssnano({ 
     convertValues: { 
     length: false 
     }, 
     discardComments: { 
     removeAll: true 
     } 
    })) 
    .pipe(gulp.dest('./css')) 
});