How to use Head JS with all enqueued scripts?

2 Views

I want to load head js first and then all enqueued scripts into it’s function. Like 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>

How would I do this?

Read More

For those that don’t know HeadJS is the 2.30KB script that speeds up, simplifies and modernizes your site…

http://headjs.com/

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. You should be forewarned that not all plugins/themes use enqueue. When I first started dealing with all the JavaScripts and CSS files outputed I just hooked into the enqueued files. This resulted in me only getting 2 out of 10 JavaScript files and 1 out of 3 CSS files.

    Here is some quick PoCs. Neither tested but meant to put you in the right direction, if you can code. Once I get home I’ll whack together something more fitting and functional.

    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.'")';
}

    (Basically swiped most of the code from JS & CSS Script Optimizer)

    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;
}

    Using WP Super Cache output buffering.

  2. Here’s what I’m trying to do to integrate head.js:

    i put this code in my template functions.php file

    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();
}

    It outputs something like this:

    <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>

    Notice that it also uses script labeling that could be really useful sometimes to identify what (and when) scripts are loaded.