he diseñado un WordPress tema para mi. Debido a la gran cantidad de códigos, he dividido el style
y script
archivos en varios archivos.
He introducido todos estos archivos en mi plantilla utilizando el siguiente código que he colocado en el función archivo:
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 );
}
El número total de mis archivos de estilo y script es 61 archivos e introducirlos a todos en la plantilla a través del código anterior es muy difícil.
¿Hay alguna manera de vincular todos mis archivos de estilo creando el all.css
archivo e introducir solo este archivo en mi plantilla?
Y haz lo mismo con script
archivos a través de all.js
?
protob
Puedes usar una herramienta de construcción como gulp
o webpack
para crear paquetes js y css. Aquí hay una configuración de muestra para 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'));
-
Hola. Es decir, si creo un archivo llamado gulpfile.js y pongo su código en él. ¿No hay necesidad de introducir archivos a través del código anterior en la función?
– Desarrollador
23 de febrero a las 6:03
-
Quiero presentar solo la carpeta JS y CSS que escribí yo mismo.
– Desarrollador
23 de febrero a las 6:05
-
Esta configuración de Gulp simplemente une todos los archivos en
src/js
ysrc/css
. Coloque los archivos que desea procesar allí. Todavía tienes que incluir los paquetes.dist/all.js
ydist/all.css
en wordpess usandowp_enqueue_style
ywp_enqueue_script
– protob
23 de febrero a las 6:11