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，但我认为你可能不得不改变这个电话，也可能在管道中。

Gulp autoprefixer输出错误

1 个答案: