为 WordPress 模板创建 all.css 和 all.js 文件

Question

我为自己设计了一个WordPress主题。由于代码较多，我把style和script文件分成了几个文件。

我已使用放置在函数文件中的以下代码将所有这些文件引入到我的模板中：

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

}

我的样式和脚本文件总数为61 个文件，通过上述代码将它们全部引入模板非常困难。

有没有一种方法可以通过创建文件来链接所有样式文件all.css并仅将此文件引入到我的模板中？

script并通过 ? 对文件执行同样的操作all.js？

Answer 1

您可以使用gulp或之类的构建工具webpack来创建 js 和 css 包。这是示例配置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'));