gulp-autoprefixerが動作しない

Question

gulp-autoprefixerを動作させることができません。私はトランジションでテストしていましたが、私のscssファイルを保存すると、プレフィックスは私のCSSファイルには表示されません。他のすべてはうまくいくようです。

これは私の一気ファイルです：

var gulp = require('gulp'), 
    plumber = require('gulp-plumber'), 
    rename = require('gulp-rename'), 
    autoprefixer = require('gulp-autoprefixer'), 
    imagemin = require('gulp-imagemin'), 
    cache = require('gulp-cache'), 
    sass = require('gulp-sass'), 
    browserSync = require('browser-sync'); 

gulp.task('browser-sync', function() { 
    browserSync({ 
    server: { 
     baseDir: "./" 
    } 
    }); 
}); 

gulp.task('bs-reload', function() { 
    browserSync.reload(); 
}); 

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

gulp.task('styles', function(){ 
    gulp.src(['scss/**/*.scss']) 
    .pipe(plumber({ 
     errorHandler: function (error) { 
     console.log(error.message); 
     this.emit('end'); 
    }})) 
    .pipe(sass()) 
    .pipe(autoprefixer('last 2 versions')) 
    .pipe(gulp.dest('css/')) 
    .pipe(browserSync.reload({stream:true})) 
}); 


gulp.task('default', ['browser-sync'], function(){ 
    gulp.watch("scss/**/*.scss", ['styles']); 
    gulp.watch("*.html", ['bs-reload']); 
}); 

はあなたの助けありがとうございました!!

UPDATE

var gulp = require('gulp'), 
    plumber = require('gulp-plumber'), 
    rename = require('gulp-rename'), 
    autoprefixer = require('gulp-autoprefixer'), 
    imagemin = require('gulp-imagemin'), 
    cache = require('gulp-cache'), 
    sass = require('gulp-sass'), 
    browserSync = require('browser-sync'); 

gulp.task('browser-sync', function() { 
    browserSync({ 
    server: { 
     baseDir: "./" 
    } 
    }); 
}); 

gulp.task('bs-reload', function() { 
    browserSync.reload(); 
}); 

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

gulp.task('styles', function(){ 
    gulp.src(['scss/**/*.scss']) 
    .pipe(plumber({ 
     errorHandler: function (error) { 
     console.log(error.message); 
     this.emit('end'); 
    }})) 
    .pipe(sass()) 
    .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
    .pipe(gulp.dest('css/')) 
    .pipe(browserSync.reload({stream:true})) 
}); 


gulp.task('default', ['browser-sync'], function(){ 
    gulp.watch("scss/**/*.scss", ['styles']); 
    gulp.watch("*.html", ['bs-reload']); 
}); 

Answer 1

documentationによると、実装は、あなたが持っているものと若干異なります。

const gulp = require('gulp'); 
const autoprefixer = require('gulp-autoprefixer'); 

gulp.task('default',() => 
    gulp.src('src/app.css') 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
     .pipe(gulp.dest('dist')) 
); 

それが今、具体的配列としてbrowsersを含むオブジェクトを渡します。

これは、あなたのように見える古い構文を使用するGulpfilesがあるため、使用しているバージョンによって異なる場合があります。