web-dev-qa-db-fra.com

Chargement d'actifs avec gulp.js ou Grunt

Je viens juste de commencer à utiliser gulp.js , qui est un coureur de tâches comme Grunt et de nombreux sites sur lesquels je travaille utilisent WordPress. Je me demandais donc si quelqu'un a quelques idées sur la façon d’utiliser les scripts combinés que gulp produira avec WordPress (ou n’importe quel fichier combinant plusieurs fichiers en un).

Donc, disons que j’ai gulp setup pour concaténer et minimiser quelques fichiers de plug-in de fournisseurs, tels que fancybox, et flexslider en un fichier appelé plugins.min.js. Je chargerais ensuite cela dans mon thème en utilisant wp_enqueue_script à partir du fichier functions.php.

function enqueue_scripts() {
    wp_register_script( 'custom-plugins', get_template_directory_uri() . '/assets/js/build/plugins.min.js', array( 'jquery' ), '1.0', true );

    wp_enqueue_script( 'custom-plugins' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Mais disons qu’un plugin s’installant qui utilise aussi fancybox (maudits clients) s’installe. Étant donné que le script est chargé en tant que custom-plugins au lieu de fancybox, le fichier fancybox.js sera chargé à partir de ce plug-in, ainsi que mon fichier de script simplifié, ce qui pourrait entraîner des problèmes et une taille de fichier inutile.

Idem pour wp_enqueue_style. Des pensées/idées à ce sujet?

2
ferne97

J'en ai déjà marre et la meilleure façon de faire est d'enregistrer les scripts à combiner et de définir leur source sur false pour empêcher les autres plugins de les charger. Je sais que ce n'est pas la meilleure solution et est un peu hacky, mais je ne peux pas penser à d'autres moyens. De plus, cela ne fonctionnera que si le nom du descripteur est exactement le même.

function enqueue_scripts() {
    // These files are concatenated into plugins.min.js
    wp_register_script( 'fancybox', false );
    wp_register_script( 'flexslider', false );

    // Concatenated js files
    wp_register_script( 'custom-plugins', get_template_directory_uri() . '/assets/js/build/plugins.min.js', array( 'jquery' ), '1.0', true );

    wp_enqueue_script( 'custom-plugins' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts', 1 );

J'ai également dû ajouter une priorité plus élevée à l'action wp_enqueue_scripts pour m'assurer qu'elle aurait la priorité sur les autres plugins.

1
ferne97

C'est insoluble. Il n’existe aucun moyen d’identifier le code exact qui est chargé par le code tiers, à moins de conserver une sorte de base de données de ressources (somme de contrôle de fichier par exemple). Ce qui serait une douleur énorme et toujours pas complètement fiable.

Le mieux que l'on puisse faire dans cette situation est d'utiliser le script de manière à minimiser la probabilité de conflits. La fonctionnalité noConflict a été implémentée, etc.

0
Rarst

C’est une question à laquelle on a répondu dans plusieurs autres endroits.

La réponse générale est que si tous les plugins utilisent correctement wp_enqueue_script, vous pouvez écrire un code personnalisé que le premier lien ci-dessous décrit (vaguement) qui concaténera et réduira le JS/CSS nécessaire ou vous pouvez utiliser un plugin WordPress pour le faire.

Voir l'article de WordPress Stack Exchange: Le chargeur de scripts/styles WP peut-il être utilisé pour concaténer et créer des scripts et des styles gzip dans le frontal? .

Deux plugins WordPress populaires qui peuvent concaténer et minimiser JS & CSS sont,

0
bonnerl