Erstellen der all.css- und all.js-Datei für die WordPress-Vorlage

Ich habe eine entworfen WordPress Thema für mich. Aufgrund der Vielzahl an Codes habe ich die geteilt style Und script Dateien in mehrere Dateien.

Ich habe alle diese Dateien in meine Vorlage eingeführt, indem ich den folgenden Code verwendet habe, den ich in die Funktion Datei:

add_action( 'wp_enqueue_scripts', 'files_assets' );

function files_assets() {
    
// Introducing CSS files
  wp_enqueue_style( 'Bootstrap-min', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4.0.0' );


// Introducing JS files
  wp_enqueue_script( 'jQuery3.4.1', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', array( 'jquery' ), '1.4.1', true );

}

Die Gesamtzahl meiner Stil- und Skriptdateien beträgt 61 Dateien und es ist sehr schwierig, sie alle durch den obigen Code in die Vorlage einzuführen.

Gibt es eine Möglichkeit, alle meine Stildateien dort zu verknüpfen, indem ich die all.css Datei und führe nur diese Datei in meine Vorlage ein?

Und mache dasselbe mit script Dateien durch all.js?

Sie können ein Build-Tool wie verwenden gulp oder webpack um js- und css-Bundles zu erstellen. Hier ist eine Beispielkonfiguration für gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('styles', function() {
  return gulp.src('./src/css/*.css')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('scripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/css/*.css', gulp.series('styles'));
  gulp.watch('./src/js/*.js', gulp.series('scripts'));
});

gulp.task('default', gulp.series('styles', 'scripts', 'watch'));