gulp-autoprefixer在连接到主要功能后无法正常工作 json gulpfile.js 测试：

如何解决gulp-autoprefixer在连接到主要功能后无法正常工作 json gulpfile.js 测试：

试图弄清楚如何实现自动前缀程序以在我的代码中工作。

json

"browser-sync": "^2.26.12","gulp": "^4.0.2","gulp-autoprefixer": "^7.0.1","gulp-postcss": "^8.0.0","gulp-sass": "^4.1.0","node-sass": "^4.14.1"

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const autoprefixer = require('gulp-autoprefixer');


// compile scss into css
function style() {
    // 1. where is my scss file?
    return gulp.src('./scss/**/*.scss')

    // 2 pass that file through sass compiler
    .pipe(sass().on('error',sass.logError))

    //3. where do I save the compiled css?
    .pipe(gulp.dest('css'))

    //  4. stream changes to all browser
    .pipe(browserSync.stream())

    // 5. autoprefixes for different browsers
    .pipe(autoprefixer())

}

function watch() {
    browserSync.init({
        server: {
            // this saves it in the current directory
            baseDir: './'
        }
    });

    gulp.watch('./scss/**/*.scss',style);
    gulp.watch('./*.html').on('change',browserSync.reload);
    gulp.watch('./js/**/*.js').on('change',browserSync.reload);
}

exports.style = style;
exports.watch = watch;

测试：

  h1 {
      font-size: 11em;
      text-align: center;
     
      display: grid;
      transition: all .5s;
      user-select: none;
      background: linear-gradient(to bottom,yellow,black);
    }
  

我遵循了有关如何添加这些简单命令的Youtube教程，但是它们将代码分成了较小的部分，与文档页面上的源代码不作比较。所以我试图在样式函数中包含不同的代码，但这是行不通的！？....

如果我以后想添加其他功能，该怎么做才能在代码库中添加更多管道？