ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Asset Linker, combine your CSS and JS assets.

August 16, 2010 8:16pm

Subscribe [7]
  • #1 / Aug 16, 2010 8:16pm

    Joseph Wensley

    38 posts

    I was looking for a way to combine all my CSS and JS files to reduce http requests so I decided to write this plugin. It takes all the provided files and combines them into 1 file and performs some minification on them.

    It also has the option to gzip your files.

    If you have any issues you can leave a comment on my blog or send me an .(JavaScript must be enabled to view this email address).

    ------------------------------
    - Requirements
    ------------------------------
    ExpressionEngine 2.x
    PHP 5+
    JavaScriptPacker (included) - Needed for minification of Javascript files.
    ------------------------------
    - Parameters
    ------------------------------
    type = js/css (defaults to css)
    assets(required) = '|' delimited list of asset file names
    asset_dir(required) = relative path from the root to the directory where your assets are
    cache_name = a name for the cached file
    output = tag/code/disable (defaults to tag) Tag outputs a link/script tag to the cache file, code outputs the combined and minified code and disable outputs tags linking to the original files
    minify = on/off (defaults to on)
    gzip = on/off (defaults to off)
    
    ------------------------------
    - Example Usage
    ------------------------------
    There are 2 ways to use this plugin
    
    The first way is to put the template tag into your <head> like:
    {exp:asset_linker type="js" assets="jquery|cufon|Calibri.font|slideshow|common" asset_dir="/assets/js" cache_name="scripts"}
    {exp:asset_linker type="css" assets="reset|960|text|master" asset_dir="/assets/css" cache_name="home"}
    
    -- Example 2 --
    
    The second option is to put the tags into a template which you then link to:
    
    in your template
    <link rel="stylesheet" type="text/css" media="all" href="/index.php/site/styles/" />
    
    in 'site/styles' CSS template
    {exp:asset_linker type="css" assets="reset|960|text|master" asset_dir="/assets/css" cache_name="home" output="code"}
    
    -- Notes --
    
    The second option lets you use ExpressionEngine's output system to have everything gzipped and use the page cache but experienced lower performance in my test and is not recommended for most cases.
    
    ------------------------------
    - Changelog
    ------------------------------
    1.1 - Added output="disable" option (Thanks to Kevin Smith)
        - Don't add the gzip php code if output="code"
    1.0 - Initial Release

    Asset Linker 1.1

  • #2 / Aug 16, 2010 8:36pm

    lebisol

    2234 posts

    Nice idea…I wonder how well it compares (performance wise) to just using old embeds…database call vs. http request.
    Thanks for sharing.

  • #3 / Aug 17, 2010 4:47am

    Great! Yesterday I was thinking about the same idea! It’s really a performance saver!

  • #4 / Aug 17, 2010 6:21am

    Tyssen

    756 posts

    For those still working with 1.6.x, you can use SL Combinator instead: http://devot-ee.com/add-ons/sl-combinator/

  • #5 / Aug 26, 2010 2:10pm

    Kevin Smith

    4784 posts

    Just made a tiny improvement to this plugin to allow it to be disabled and insert the individual js/css tags into the HTML doc instead; it really helps during development and troubleshooting. I’ve sent it to Joseph, so hopefully it’ll make it into the next release!

  • #6 / Aug 26, 2010 11:21pm

    Joseph Wensley

    38 posts

    Just made a tiny improvement to this plugin to allow it to be disabled and insert the individual js/css tags into the HTML doc instead; it really helps during development and troubleshooting. I’ve sent it to Joseph, so hopefully it’ll make it into the next release!

    I updated the plugin to include your idea and update the link in my original post.

  • #7 / Aug 27, 2010 11:37am

    Kevin Smith

    4784 posts

    One note for anyone getting server errors: it looks like the latest update (1.1) has the plugin setting the cache directory to chmod 777. This particular project I’m working on now is located on a shared hosting server with suPHP enabled, meaning that any 777 directories are inaccessible. If you, too, are working with suPHP enabled (which is likely on a shared hosting setup), just change this line (106)

    chmod($cache_dir, 0777);

    to this

    chmod($cache_dir, 0755);
  • #8 / Aug 09, 2011 6:57pm

    a la mode

    168 posts

    Is there a way to use this with externally referenced files? I have tried, but failed each time. We host our js and css on a different server (CDN) and would like to compress everything using this if possible.

    Thanks in advance.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases