Wie verwende ich Head JS mit allen in die Warteschlange gestellten Skripten?

Ich möchte zuerst head js und dann alle in die Warteschlange gestellten Skripte in seine Funktion laden. Wie so ...

<script src=">/js/head.load.min.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // all done

});
</script>

Wie würde ich das machen?

Für diejenigen, die HeadJS nicht kennen, ist das 2,30-KB-Skript, das Ihre Website beschleunigt, vereinfacht und modernisiert ...

http://headjs.com/

Sie sollten darauf hingewiesen werden, dass nicht alle Plugins / Themes die Warteschlange verwenden. Als ich anfing, mich mit allen ausgegebenen JavaScripts und CSS-Dateien zu befassen, habe ich mich einfach in die in die Warteschlange gestellten Dateien eingebunden. Dies führte dazu, dass ich nur 2 von 10 JavaScript-Dateien und 1 von 3 CSS-Dateien erhielt.

Hier sind einige schnelle PoCs. Weder getestet noch gedacht, um Sie in die richtige Richtung zu bringen, wenn Sie codieren können. Sobald ich nach Hause komme, werde ich etwas Passenderes und Funktionaleres zusammenschlagen.

add_action('wp_print_scripts','head_files');
function head_files(){

    global $wp_scripts, $auto_compress_scripts;

    print 'print out head.js';  

    $queue = $wp_scripts->queue;
        $wp_scripts->all_deps($queue);
        $to_do = $wp_scripts->to_do;
    $headArray = array();
        foreach ($to_do as $key => $handle) {
            $src = $wp_scripts->registered[$handle]->src;
        $headArray[] = $src;
    }

    print 'print out head.js("'.implode("'",$headArray.'")';
}

(Grundsätzlich wurde der größte Teil des Codes aus dem JS & CSS Script Optimizer geklaut. )

add_filter('wpsupercache_buffer', 'head_files' );
function head_files($buffer){
    if ( $fileType == "js" ){
            preg_match_all('~<script.*(type="["\']text/javascript["\'].*)?src=["\'](.*)["\'].*(type=["\']text/javascript["\'].*)?></script>~iU',$content,$matches);
            $headArray = $matches[2];
    }


    print 'print out head.js';  

    print 'print out head.js("'.implode("'",$headArray.'")';
    return $buffer;
}

Verwenden der WP Super Cache-Ausgabepufferung.

Folgendes versuche ich zu tun, um head.js zu integrieren:

Ich habe diesen Code in meine Vorlagendatei functions.phpeingefügt

define('THEME', get_bloginfo('template_url'), true);
define('THEME_JS', THEME . '/js/', true);

add_action('wp_print_scripts','head_js_files');
function head_js_files()
{
    if (is_admin()) return; //to preserve the admin

        global $wp_scripts;

    $in_queue = $wp_scripts->queue;

    if(!empty($in_queue))
    {
        $scripts = array();
        foreach($in_queue as $script)
        {

            $src = $wp_scripts->registered[$script]->src;
            $src = ( (preg_match('/^(http|https)\:\/\//', $src)) ? '' : get_bloginfo('url') ) . $src;
            $scripts[] = '{' . $script . ':"' . $src . '"}';
        }

        echo "<script type=\"text/javascript\" src=\"".THEME_JS."head.js\"></script>\n";
        echo "<script type=\"text/javascript\">head.js(\n". implode(",\n", $scripts). "\n);</script>\n";
    }

    $wp_scripts->queue = array();
}

Es gibt ungefähr so ​​aus:

<script type="text/javascript">head.js(
    {jquery:"/wp-includes/js/jquery/jquery.js"},
    {jquery_lastfm:"http://localhost/lucianomammino/wp-content/plugins/lastfm-recent-tracks-widget/js/jquery.lastfm.js"},
    {nav:"http://localhost/lucianomammino/wp-content/themes/lmtheme/js/jquery.dropdown.js"}
);</script>

Beachten Sie, dass auch Skriptbeschriftungen verwendet werden, die manchmal sehr nützlich sein können, um festzustellen, welche (und wann) Skripte geladen werden.

Sie können dieses Plugin auch ausprobieren (oder sich zumindest den Code darin ansehen):

http://wordpress.org/extend/plugins/headjs-loader/

Es gibt einen regulären Ausdruck für die Ausgabe aus, bevor sie auf dem Bildschirm gedruckt wird, sodass sie auch mit Skripten funktioniert, die nicht in die Warteschlange gestellt wurden.

Hier ist meine Lösung dafür. Ich benutze yepnope anstelle von head.js, aber die Theorie ist ziemlich gleich.

https://wordpress.stackexchange.com/a/40325/9802

Ich hoffe es hilft und lass es mich wissen, wenn du Kommentare zu diesem anderen Thread hast.