为什么 gulp autoprefixer 输出不变的 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'));
});