为什么gulp自动前缀输出不变的CSS？

Question

我正在学习使用Flexbox，并且正在尝试添加前缀。 Gulp的回应方式我不知道该如何解释。由于某种原因，当我尝试使用Gulp自动前缀时出现以下错误：

[19:21:22] Starting 'styles'...
[19:21:22] The following tasks did not complete: styles
[19:21:22] Did you forget to signal async completion?

这是我的'gulpfile.js'：

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', () => {
  gulp.src('styles.css')
    .pipe(autoprefixer())
    .pipe(gulp.dest('build'));
});

这是'styles.css'文件：

.container {
  display: flex;
}
.item {
  flex-direction: column;
}

但是，'build / styles.css'的输出与上面的完全一样，没有前缀。

我已经尝试将浏览器列表添加到package.json，使函数异步，并通过postcss运行它。一切都没有改变。有想法吗？

Answer 1

autoprefixer使用Browserslist，尝试添加配置文件.browserslistrc和下面的代码或您的设置。

参考：

• https://github.com/postcss/autoprefixer

我的.browserslistrc

last 2 version

`> 5%`

`IE 10 # sorry`

关于

[[19:21:22]以下任务未完成：样式

[[19:21:22]您是否忘记信号异步完成？

我认为gulp函数需要返回一个函数，而不是void函数

可以在gulpjs.com上查看文档

参考：

• https://gulpjs.com/docs/en/getting-started/async-completion

我的gulpfile.js

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', () => {
  return gulp.src('styles.css')
    .pipe(autoprefixer())
    .pipe(gulp.dest('build'));
});