Hi everybody,

I used to use Basset to manage my assets - I grew very fond of the notion of "collections" and organized my assets so that they were neatly packaged for that paradigm. However, I was not so fond of the problems with LessPHP - in particular, for a while it was unable to compile the .less files for Bootstrap. This has probably been fixed by now, but I've moved on.

I made the transition to Grunt for my .less compilation needs. This works well, but there are two issues: 1) I had to write my own code for organizing my assets into collections, and 2) my Gruntfile is large and complex.

So, I'm now looking at Gulp, which will help take care of the second of these issues. But it does nothing to address the first, and I have to wonder if I'm approaching this the wrong way. Before I make any more changes to my asset management, I'd like to hear how others are doing this and I'd like to hear if there's a simpler way to organize this.

Here's my basic organization. I'll discuss my "edit user" page as an example:

In my controller, the View for the edit page is created like this:

    return \View::make('account.edit-user')
        ->with('user', $user)
        ->with(
            'groups',
            new \Illuminate\Database\Eloquent\Collection(
                \Sentry::getGroupProvider()->findAll()
            )
        );

My view templates are arranged in a hierarchy. The view will load account/edit-user.tpl, which extends the main.tpl template. edit-user.tpl is responsible for rendering the form and main.tpl is responsible for rendering all the other stuff (menu bar & menus, page footer, etc.). Each template will also load the CSS & Javascript it needs for it's own functionality. This includes:

• edit-user.tpl
  • myapp/css/forms.less (custom CSS for my form)
  • bootstrap/css/bootstrap-datetimepicker.css (CSS for a bootstrap date/time picker)
• main.tpl
  • font-awesome/css/font-awesome.less
  • bootstrap/css/bootstrap.less
  • bootstrap/css/bootstrap-typeahead.less
  • myapp/css/newsticker.less (custom CSS for a scrolling news ticker on the menu bar)
  • myapp/css/timeclock.less (custom CSS for a timeclock function on the menu bar)

This is just the CSS to give you an idea - the Javascript is similar.

When I'm working in my development environment, I'd like Grunt/Gulp to compile my .less files and I'd like to output them as individual links in my pages. When the code is deployed to production, I'd like Grunt/Gulp to compile them, minimize them, and concatenate them into one output file. Basset used to do this (and included cache busting file names too), but short of writing a lot of code (which I have done for Grunt, but I'm not really happy with) I don't know how to do this.

How do others do this? Does this problem have a solution? Do I need to take a different approach with my assets?

Thanks