Pug + php(wordpress) + gulp как сделать такую сборку!?

Question

[freeman0204]

Сейчас есть сборка pug + scss, сжатие картинок и т.д. Но это сборка чисто для верстки. Я часто делаю сайты по WP. Сейчас я верстаю сначала все и потом начинаю натягивать на WP и если нужно что то изменить в стилях это не очень удобно, так как я использую переменные, scss вложенность и миксины и потом приходится это все криво дописывать уже на css, а в сборке у меня все по папкам раскидано, ну вообщем вы поняли, бред получается.
Мне нужна сборка что бы в pug можно было писать php и все это обновлялось как сейчас есть с pug + scss что бы я смог делать весь цикл работы, верстку и wordpress на одной сборке и всегда имел доступ к изначальным исходникам pug + scss.
Как это все по красоте сделать?
Вот то что есть:

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

[zorca]

Используйте стартовые темы с включенным сборщиком, например Sage. Можно использовать и Pug, насколько я помню, в нем прекрасно живут куски PHP. Есть отдельные проекты, совмещающие функционал Pug и PHP: Tale Jade и Pug PHP.