gulp-autoprefixer不工作

我只是不能让gulp-autoprefixer工作。我用转换测试它，但是当我保存我的scss文件时，前缀不会显示在我的css文件中。其他一切似乎都很好。gulp-autoprefixer不工作

这是我一饮而尽文件：

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']); 
});

来源

2017-04-18 Tiago

按照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使用的语法看起来更像您的语法。

来源

2017-04-18 16:03:45 Toby

谢谢。我试图在我的例子中实现它，但它只是不想工作。 – Tiago

您的autoprefixer管道是否与我的答案中显示的内容匹配？你可以尝试安装和添加[gulp-debug]（https://www.npmjs.com/package/gulp-debug），它可以让你注销任务中发生的事情。 – Toby

因为我有更多的东西在同一个函数中进行，所以我有点不确定把新代码放在哪里。我现在有这样的功能： gulp.task（'styles'，function（）{gulp.src（['scss/**/*。scss']） .pipe（管道工（{errorHandler：函数（误差）{ 的console.log（返回Error.message）; this.emit（ '结束'）;} }）） .pipe（SASS（）） .pipe（autoprefixer（{ 浏览器：[” （'css /'）） .pipe（browserSync.reload（{stream：true}））） } – Tiago

gulp-autoprefixer不工作

回答

相关问题