javascript - Gulp autoprefixer 给出了错误的输出

Question

当我使用 gulp 自动为我的样式表添加前缀时，它产生了错误的输出。我在 gulpfile 中做错了什么吗？

我的 gulpfile 看起来像这样:

var gulp = require('gulp'),
    livereload = require('gulp-livereload');
    sass = require('gulp-sass');
    autoprefixer = require('gulp-autoprefixer');

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('wp-content/themes/eovostarter/sass/**/*.scss', ['sass']);
});

gulp.task('sass', function() {
  gulp.src('wp-content/themes/eovostarter/sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('wp-content/themes/eovostarter/'))
  gulp.start('prefix');
});

gulp.task('prefix', function() {
  gulp.src('wp-content/themes/eovostarter/style.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('wp-content/themes/eovostarter/'))
  livereload.reload();
});

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

当我在以下 scss 上运行它时:

.test {
  color:red;
  transform:scale(0.3);
}

它在实际的 css 文件中产生这个:

.test {
  color: red;
  transform: scale(0.3); }
0.3);
  transform: scale(0.3); }

有什么想法吗？

谢谢

Answer 1

我从未见过这样使用 gulp.start - 我认为不推荐这样做。只需使前缀任务依赖于 sass 任务并在 gulp.watch 中调用前缀任务，它可能会正常工作。

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('wp-content/themes/eovostarter/sass/**/*.scss', ['prefix']);
});

gulp.task('sass', function() {
  gulp.src('wp-content/themes/eovostarter/sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('wp-content/themes/eovostarter/'));
     });

gulp.task('prefix', ['sass'], function() {
  gulp.src('wp-content/themes/eovostarter/style.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('wp-content/themes/eovostarter/'))
  .pipe(livereload.reload());
});

我不使用 livereload，但我认为您可能还必须更改该调用才能在管道中。