Gulp autoprefixer 给出错误的输出答案

【问题标题】：Gulp autoprefixer gives wrong outputGulp autoprefixer 给出错误的输出
【发布时间】：2018-02-02 03:06:02
【问题描述】：

当我使用 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); }

有什么想法吗？

谢谢

【问题讨论】：

为什么不将 sass() 导入 autoprefixer ？不需要2个任务

标签： javascript php jquery css gulp

【解决方案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，但我认为您可能还必须更改该调用才能进入管道。

【讨论】：