Creating all.css and all.js file for WordPress template

I have designed a WordPress theme for myself. Due to the large number of codes, I have divided the style and script files into several files.

I have introduced all these files to my template using the following code that I have placed in the function file:

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 );

}

The total number of my style and script files is 61 files and introducing all of them to the template through the above code is very difficult.

Is there a way that I can link all my style files there by creating the all.css file and introduce only this file to my template?

And do the same thing with script files through all.js?

>Solution :

You can use build tool like gulp or webpack to create js and css bundles. Here is sample config for gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-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'));