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가 있기 때문에 사용중인 버전에 따라 달라질 수 있습니다.