FuelPHP Forums

Ask your question about FuelPHP in the appropriate forum, or help others by answering their questions.
casset - an alternative asset class which supports minifying scripts, cleaner syntax
  • Hi all, I spent today writing an alternative to the Asset class. I'm coming from codeigniter, and was longing for something like the wonderful carabiner library.
    While I don't yet have the full carabiner feature set, Casset does boast the following:
    - Minifying (and caching) css / js
    - More powerful groups
    - Enabling / disabling groups
    - Defining groups in a config file
    - Rendering all groups at once
    - Rendering css/js from a string Please take a look -- the repo's at http://github.com/canton7/fuelphp-casset/. Suggestions, criticism, flame, contributions all equally welcome. Thanks!
  • I think there's something similar there already https://github.com/fuel/assetic
  • Nice link, hadn't come across that library. Assetic looks to be largely focussed on minification (and, to a degree, compression), while throwing a cursory nod at grouping (and a rather complex nod at caching). Casset is smaller (and therefore much simpler), and focusses more on displaying the correct assets in the correct manner with a minimum of typing, with minification if you want it.
  • I like your library, it's quite simple as you said.. you should speak to the fuelphp dev guys to put your library inside the fuelphp repositories.
  • Thanks for the encouragement! I doubt they'll want to change anything in Fuel with a release on the way, but I might mention it once they get back onto feature-adding and Casset gets a bit more real-world experience.
  • Antony Male wrote on Wednesday 8th of June 2011:
    Thanks for the encouragement! I doubt they'll want to change anything in Fuel with a release on the way, but I might mention it once they get back onto feature-adding and Casset gets a bit more real-world experience.

    I meant as a package not something in the core, so it's easier to find
  • Aha I see. I hadn't noticed they did that. Regardless, I think I'll let it mature a little first.
  • Antony Male wrote on Wednesday 8th of June 2011:
    Aha I see. I hadn't noticed they did that. Regardless, I think I'll let it mature a little first.

    Hey, your lib looks nice, you can talk to Jelmer on irc, so he forks your library to https://github.com/fuel-packages so users can find it easier. and one more thing, if you package is in https://github.com/fuel-packages, it gets easy to install via oil :) Good luck and thanks for contribution
  • Welp I'm sold - thanks for the library! I'll be sure to credit you in my humans.txt.
  • This is a great fit for my website. It was very easy to incorporate. As you stated, configuration is sensible. Very straight-forward for typical applications, and comes with good documentation for anything out of the ordinary. I'm not sure how Dan's forked Assetic compares with this. I had a look at those docs and didn't find it to be as strait-forward as yours. I can also appreciate the simplicity of this package. If I could offer just one small suggestion, it would be to make reference to Fuel::add_package('casset'); and the config always_load. I think you'll be getting a lot of recognition for your work. Thanks for sharing your code!
  • Thanks for the kind words everyone. v1.3 has just been pushed. Along with other improvements, the readme now has a section explaining how Assetic and Casset differ, and the installation instructions tell you how to autoload the package (good catch, Simon, thanks).
  • I'm planning to use your library on my project and wondering how do you manage assets files in different locations for example mulitple theme dirs? /Assets
    ----/themes
    /default
    /js
    /css
    /img
    /admin
    /js
    /css
    /img It would be cool if you can override the asset location in the config file :) .. thanks again for your great contribution.
  • A Huzz wrote on Saturday 11th of June 2011:
    I'm planning to use your library on my project and wondering how do you manage assets files in different locations for example mulitple theme dirs?

    Current it behaves exactly the same as Asset in this respect. You add the paths you want Casset to search through to the 'paths' config variable, and Casset will search through those and grab the first matching asset it finds. So in your instance you'd add "assets/themes/default/" and "assets/themes/admin/" to the paths array. I'm not entirely happy with this approach however (you're taking something that's nicely namespaced, and stripping all of that out -- what happens if you have two files called 'index.js' and want to include the second?). I'm entirely open to suggestions as to the best way to handle this.
  • Antony Male wrote on Saturday 11th of June 2011:
    A Huzz wrote on Saturday 11th of June 2011:
    I'm planning to use your library on my project and wondering how do you manage assets files in different locations for example mulitple theme dirs?

    Current it behaves exactly the same as Asset in this respect. You add the paths you want Casset to search through to the 'paths' config variable, and Casset will search through those and grab the first matching asset it finds. So in your instance you'd add "themes/default/" and "themes/admin/" to the paths array. I'm not entirely happy with this approach however (you're taking something that's nicely namespaced, and stripping all of that out -- what happens if you have two files called 'index.js' and want to include the second?). I'm entirely open to suggestions as to the best way to handle this.

    thanks for your quick response, if you have identical files can you not place them with the same dir structure in the cache dir? so you will have cache/theme1/js/index.js and cache/theme2/index.js.
  • A Huzz wrote on Saturday 11th of June 2011:
    thanks for your quick response, if you have identical files can you not place them with the same dir structure in the cache dir? so you will have cache/theme1/js/index.js and cache/theme2/index.js.

    Currently, no. This is a flaw that the original Asset library shares. Check back on Monday, however, and I'll try and have something written in. Do you think a syntax like
    Casset::js('admin::index.js')
    
    would work? I don't want the user to have to specify the whole path to the file -- including the 'js/' bit -- as Casset is able to work that out.
    Maybe make the paths array associative, so you can specify this (in your config file)
    'paths' => array(
       'admin' => 'assets/themes/admin/'
    ),
    
    And then invoke this path with the syntax used above? What do you think?
  • Antony Male wrote on Saturday 11th of June 2011:
    A Huzz wrote on Saturday 11th of June 2011:
    thanks for your quick response, if you have identical files can you not place them with the same dir structure in the cache dir? so you will have cache/theme1/js/index.js and cache/theme2/index.js.

    Currently, no. This is a flaw that the original Asset library shares. Check back on Monday, however, and I'll try and have something written in. Do you think a syntax like
    Casset::js('admin::index.js')
    
    would work? I don't want the user to have to specify the whole path to the file -- including the 'js/' bit -- as Casset is able to work that out.
    Maybe make the paths array associative, so you can specify this (in your config file)
    'paths' => array(
       'admin' => 'assets/themes/admin/'
    ),
    
    And then invoke this path with the syntax used above? What do you think?

    I think the config file would be much neater option.. you can make the path optional so that by default it will look into the default assets location unless the path is specified.. what do you think? thanks.
  • OK, that's coded and is present in the develop branch. I'll do a release and bring it into master on Monday or so.
    Hope that solves your problem! EDIT: See the "Paths and namespacing" section in the readme.
  • Thanks again for your contribution.
  • Thanks for this package! But I have a problem with CSS/JS groups. I have this group:
    'groups' => array(
      'css' => array(
       'jquery-ui' => array(
        'files' => array(
         'jquery-ui.css',
        ),
        'enabled' => true,
       ),
      ),
     ),
    

    And in my view I use this:
    echo Casset::render_css();
    

    I keep getting this error:
    Notice!
    
    ErrorException [ Notice ]: Undefined index: jquery-ui.css
    
    PKGPATH/casset/classes/casset.php @ line 194:
    
    193: $parts = explode('::', $file, 2);
    194: $path = static::$asset_paths[$parts[0]];
    195: $file = $parts[1];
    

    And 2 more errors as a result of this error. The file jquery_ui.css exists in /public_html/assets/css/ and when I load the page in the browser a cache file is being created, but it's empty. This works fine:
    Casset::css('jquery-ui.css');
    echo Casset::render_css();
    

    Any idea what's going wrong?
  • My bad, that was half a documentation omission since adding in namespacing, and half forgetting that people might want to specify un-namespaced files in groups in the config file. I've updated the docs and tweaked things so that your example now works (without modification). Thanks, and apologies,
    Antony
  • Antony Male wrote on Wednesday 15th of June 2011:
    My bad, that was half a documentation omission since adding in namespacing, and half forgetting that people might want to specify un-namespaced files in groups in the config file. I've updated the docs and tweaked things so that your example now works (without modification). Thanks, and apologies,
    Antony

    Thanks Antony, works great now!
  • Why are CSS files rendered in random order? That's stupid. CSS stands for Cascading Style Sheet. The rules cascade. If I place one file after another I probably did it for a reason. I want my rules to cascade so that the correct style is attained. I think you should change this so that CSS files retain the order that they are added. I've edited your source and removed the uasort() that's run on CSS files once retrieved. :)
  • When I checked the css spec when making that decision, I could only find reference to how precedence was worked out in css rules, and absolutely nothing to do with files. Therefore the assumption was that relying on file order to determine precedence was unspecified, and people wouldn't rely on it. Sorting the files allowed for different orders of files to be assigned the same cache file. However, looking around it appears that people do rely on css file order (whether in accordance with the spec or not -- I need to investigate more thoroughly), so I've removed the re-ordering in the develop branch. I'll probably do a release later this week, where it'll get pushed to master. Thanks for the heads-up!
  • Sounds good man! Great package by the way. Thanks heaps.
  • Thanks for this package, it's really useful for my website. But I have a question. I'm using uploadify, which contains CSS, JS, images and some other files. Where is the best way to put these files, and use it as a group in casset? Off course I can add the files in the separate /assets/img, css, js etc. folders, but I'd like to keep the uploadify files together, something like /assets/uploadify/css, js, img etc. But then I can't enable it as a group (or can I?). I want to have it in a group so I can easily include all the necessary uploadify files on a page which needs uploadify. (In this post uploadify is just an example)
  • You'll want to create a namespace for the uploadify stuff, use something like this in your config:
    'paths' => array(
       'core' => 'assets/',
       'uploadify' => 'assets/uploadify/'
    ),
    

    Then use this namespace when defining your groups. You have to use the namespace explicitly with each file (as there's no way to call set_path), but that's alright:
    'groups' => array(
       'js' => array(
          'uploadify' => array(
             'files' => array(
                'uploadify::file1.js',
                'uploadify::file2.js',
             ),
             'enabled' => true,
          ) ,
       ),
       'css' => array(
          'uploadify' => array(...),
       ),
    ),
    

    If you're lazy, you can always glob...
    'groups' => array(
       'js' => array(
          'uploadify' => array(
             'files' => array(
                'uploadify::*.js',
             ),
             'enabled' => true,
          ) ,
       ),
       'css' => array(
          'uploadify' => array(...),
       ),
    ),
    

    I've just noticed that this isn't documented anywhere... I'll stick it in the readme for the next release. Thanks!
    Antony

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion