Не работают автопрефиксы и функция stream в gulp 4

Question

Начал работать с gulp и никак не могу понять некоторые вещи.
Все делаю по мануалам, но при решении одной проблемы возникают куча других.
gulpfile.js выглядит так:

var gulp = require("gulp");
var server = require("browser-sync").create
var less = require("gulp-less");
var plumber = require("gulp-plumber");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");

gulp.task("style", function () {
   return gulp.src("less/style.less")
        .pipe(plumber())
        .pipe(less())
        .pipe(postcss([
            autoprefixer()
        ]))
        .pipe(gulp.dest("css"))
        .pipe(server.stream());
});

gulp.task("serve", gulp.series("style"), function () {
    server.init({
        server: ".",
        notify: false,
        open: true,
        cors: true,
        ui: false
    })

    gulp.watch("less/*.less", gulp.series("style"));
    gulp.watch("*.html").on("change", server.reload);
});

При запуске с консоли появляется ошибка, хотя я сделал все, как написано на официальных страницах модулей.

[23:01:52] Using gulpfile C:\Main\Projects\Code\FlexTime\gulpfile.js
[23:01:52] Starting 'default'...
[23:01:52] Starting 'serve'...
[23:01:52] Starting 'style'...
[23:01:53] 'style' errored after 30 ms
[23:01:53] TypeError: server.stream is not a function
    at C:\Main\Projects\Code\FlexTime\gulpfile.js:16:22
    at style (C:\Main\Projects\Code\FlexTime\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:429:14)
    at runBound (domain.js:442:12)
    at asyncRunner (C:\Main\Projects\Code\FlexTime\node_modules\async-done\index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
[23:01:53] 'serve' errored after 41 ms
[23:01:53] 'default' errored after 51 ms

Если убираю server.stream(), то все работает, но тогда сервер не работает постоянно!
При этом компиляция style.less > style.css идет, но без префиксов, хотя для этого подключен специальный модуль Подскажите, пожалуйста, что я делаю не так.
package.json:

{
  "name": "flextime",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-browserify": "^0.5.1",
    "gulp-less": "^4.0.1",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0"
  }
}

Answer 1

Я разобрался, что нужно было сделать.
Проблема в том, что я использовал структуру кода, которую используют для gulp 3,
а для gulp 4 все выглядит по-другому. Вот работающий код:

var gulp = require('gulp');
var less = require('gulp-less');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

function server(done) {
    browserSync.init({
        server: {
            baseDir: './'
        },
        notify: false,
        port: 3000
    });
    done();
}

function style (done) {
    gulp.src('./less/style.less')
        .pipe(less({
            errorLogToConsole: true
        }))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(cleanCSS())
        .on('error', console.error.bind(console))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest("./css"))
        .pipe(browserSync.stream());
    done();
}

function browserReload(done) {
    browserSync.reload();
    done();
}

function watchFiles(done) {
    gulp.watch('./**/*.html', browserReload)
    gulp.watch('./less/**/*.less', style)
    done()
}

gulp.task('default', gulp.parallel(server, watchFiles));

БЛОГ НА HUSL

Не работают автопрефиксы и функция stream в gulp 4

Ответы (1 шт):