为什么 gulp autoprefixer 输出不变 css？

Question

我正在学习使用 Flexbox，并且正在尝试添加前缀。 Gulp 以一种我不知道如何解释的方式回应。出于某种原因，当我尝试使用 Gulp autoprefixer:

时出现以下错误

[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

my .browserslistrc

last 2 version

`> 5%`

`IE 10 # sorry`

关于

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

[19:21:22] 你是不是忘了发出异步完成信号？

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

可以在 gulpjs.com

上查看文档

参考：

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

my 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'));
});

为什么 gulp autoprefixer 输出不变 css？

Why is gulp autoprefixer outputting unchanged css?

css

flexbox

gulp

autoprefixer