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

drnojrws 于 2023-02-26 发布在 WordPress

关注(0)|答案(1)|浏览(157)

我为自己设计了一个WordPress主题，由于代码量大，我把style和script文件分成了几个文件。
我已经使用下面的代码将所有这些文件引入到我的模板中，这些代码已经放在function文件中：

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文件来链接所有样式文件，并仅将此文件引入模板？
并通过all.js对script文件做同样的事情？

css

来源：https://stackoverflow.com/questions/75540830/creating-all-css-and-all-js-file-for-wordpress-template

1条答案

按热度按时间

wwwo4jvm1#

你可以使用像gulp或webpack这样的构建工具来创建js和css bundle，下面是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'));

赞(0）回复(0）举报 2023-02-26

我来回答

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

1条答案

相关问题

热门标签

最新问答