Why is gulp autoprefixer outputting unchanged css?

Question

I'm learning to use Flexbox, and I'm trying to add prefixing. Gulp is responding in a way I don't know how to explain. For some reason, I'm getting the following error when I try to use 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?

Here's my 'gulpfile.js':

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

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

This is the 'styles.css' file:

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

However, the output to 'build/styles.css' is exactly as above--no prefixing.

I've already tried adding browser list to package.json, making the function async, and running it through postcss. Nothing has made a difference yet. Thoughts?

Answer 1

autoprefixer use Browserslist, try add a config file .browserslistrc and code like below or your setting.

Reference:

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

my .browserslistrc

last 2 version

`> 5%`

`IE 10 # sorry`

about

[19:21:22] The following tasks did not complete: styles

[19:21:22] Did you forget to signal async completion?

I think gulp function need to return a function, not a void function

can see doc on gulpjs.com

Reference:

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