Pug + php(wordpress) + gulp how to make such a build!?

Question

Building projects

Now there is a pug + scss build, image compression, etc. But this assembly is purely for layout. I often make websites using WP. Now I type everything first and then I start to pull it on WP, and if I need to change something in the styles, it’s not very convenient, since I use variables, scss nesting and mixins, and then I have to add it all crookedly already in css, and in the assembly I have everything is scattered in folders, well, in general, you understand, it turns out nonsense.
I need an assembly so that I can write php in pug and all this is updated as it is now with pug + scss so that I can do the entire work cycle, layout and wordpress on one assembly and always have access to the original pug + scss sources.
How to make it all beautiful?
Here is what is:

const gulp = require('gulp');
const concatCss = require('gulp-concat-css');
const rename = require('gulp-rename');
const minifyCss = require('gulp-minify-css');
const debug = require('gulp-debug');
const sourcemaps = require('gulp-sourcemaps');
const gulpIf = require('gulp-if');
const del = require('del');
const newer = require('gulp-newer');
const browserSync = require('browser-sync').create();
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const autoprefixer = require('gulp-autoprefixer');
const include = require('gulp-include');
const rigger = require('gulp-rigger');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cache = require('gulp-cache');
const changed = require('gulp-changed');
const sass = require('gulp-sass');
const jade = require('gulp-jade');

gulp.task('jade', function() {
    return gulp.src('source/include/product-card.jade')
        .pipe(jade())
        .pipe(gulp.dest('public'));
});

gulp.task('fonts', function() {
  return gulp.src('source/fonts/**/*')
    .pipe(gulp.dest('public/fonts'));
});

gulp.task('styles', function () {
  return gulp.src('source/styles/scss/**/*.scss')
    .pipe(sass())
    .pipe(rename('all.min.css'))
    .pipe(gulp.dest('public/css'))
});

gulp.task('images', function() {
   return gulp.src('source/images/**/*.{jpg,jpeg,png,gif}')
    .pipe(cache(imagemin({
      interlaced: true,
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      une: [pngquant()]
    })))
    .pipe(gulp.dest('public/images'));
});

gulp.task('js', function() {
  return gulp.src('source/js/**/*')
    .pipe(uglify())
    .pipe(rename('all.min.js'))
    .pipe(gulp.dest('public/js'));
});

gulp.task('libs', function() {
  return gulp.src([
    'source/libs/jquery/dist/jquery.min.js',
    'source/libs/slick-carousel/slick/slick.min.js',
    'source/libs/jquery.maskedinput/dist/jquery.maskedinput.js',
  ])
    .pipe(concat('libs.min.js'))
    .pipe(gulp.dest('public/js'));
});

gulp.task('clean', function() {
  return del('public/*');
});

gulp.task('clear', function() {
  return cache.clearAll();
});


gulp.task('build', gulp.series(
  'clean',
  gulp.parallel('jade', 'styles', 'images', 'js', 'libs', 'fonts'))
);

gulp.task('watch', function() {
  gulp.watch('source/include/**/*.*', gulp.series('jade'));
  gulp.watch('source/styles/**/*.*', gulp.series('styles'));
  gulp.watch('source/images/**/*.*', gulp.series('images'));
  gulp.watch('source/js/**/*.*', gulp.series('js'));
  gulp.watch('source/libs/**/*.*', gulp.series('libs'));
  gulp.watch('source/fonts/**/*.*', gulp.series('fonts'));
});

gulp.task('server', function() {
  browserSync.init({
    server: 'public'
  });
  browserSync.watch('public/**/*.*').on('change', browserSync.reload);
});

gulp.task('dev',
    gulp.series('build', gulp.parallel('watch', 'server'))
  );

Answer 1

Use starter themes with builder enabled, like Sage. You can also use Pug, as far as I remember, pieces of PHP live perfectly in it. There are separate projects that combine the functionality of Pug and PHP: Tale Jade and Pug PHP.