使用gup.js或Grunt加载资源

时间:2014-02-12 作者:ferne97

我刚开始使用gulp.js 这是一个像Grunt这样的任务执行者,我工作的很多网站都在使用WordPress,所以我想知道是否有人对如何使用gulp将通过WordPress输出的组合脚本(或者任何将多个文件组合成一个文件的文件)有一些想法。

所以,假设我有一个gulp设置来连接和缩小一对供应商插件文件,比如fancybox和flexslider,并将其缩小到一个名为plugins.min.js. 然后我会使用wp_enqueue_scriptfunctions.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\' );
但是假设安装了一个同样使用fancybox的插件(该死的客户端)。因为脚本正在加载为custom-plugins 而不是fancybox 这个fancybox.js 文件将从该插件以及我的缩小脚本文件加载,这可能会导致问题和不必要的文件大小。

同样适用于wp_enqueue_style. 对此有何想法/想法?

3 个回复
最合适的回答,由SO网友:ferne97 整理而成

我一直在胡思乱想,我能想到的最好的方法是注册要合并的脚本,并将其源代码设置为false,以防止其他插件加载它们。我知道这不是最好的解决方案,有点老套,但想不出其他方法。此外,只有当句柄名称完全相同时,这才有效。

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 );
我还必须在wp_enqueue_scripts 确保其优先于其他插件的操作。

SO网友:Rarst

这是无法解决的。除了维护某种资源数据库(例如,文件校验和)之外,没有办法确定第三方代码到底在加载什么。这将是一个巨大的痛苦,仍然不完全可靠。

在这种情况下,最好的方法是以最小化冲突概率的方式使用脚本。无冲突功能在何处实现等等。

SO网友:bonnerl

这是一个已经在其他几个地方得到回答的问题。

总结的答案是,如果所有插件都正确地使用了wp\\u enqueue\\u脚本,那么您可以编写自定义代码,下面的第一个链接(模糊地)勾勒出将连接&;缩小所需的JS/CSS,或者您可以使用WordPress插件来实现这一点。

参见WordPress堆栈交换帖子:Could the WP script/style loader be used to concatenate and gzip scripts and styles in the front-end?.

两个流行的WordPress插件,可以连接和缩小JS&;CSS是,

结束

相关推荐