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
I've never used Basset so I"m not familiar with the idea of collections but maybe you are over thinking this.
Why not compile all css down to one app.css and load that from every page. app.css is loaded once in the master template.
Its easy with gulp to create source maps with just one setting which will allow you to view which file the original less is from in your browser dev tools.
Same goes for js/coffeescript. Just keep 1 app.js which is built from all your coffee/js files. If you have one js heavy page or individual widgets you can always build and include those separately if you only want to add the loading burden to the 1 page it realates to.
I guess the "one single CSS file" solution is probably easiest. One of the things I liked about Basset was being able to tailor the CSS/Javascript for each page - for example, my "list users" page doesn't need my "forms" javascript, so it doesn't load it. But this app is strictly intranet only, so bandwidth is not a real concern. Thanks for your suggestion!
The trade off is 1 big load vs many small loads. Once the initial load of the bundled app.css has been done on the initial load, the browser will cache it for each subsequent request. With loading only each pages css rules, each different page will have to be viewed more than once to benefit from the browsers caching.
Yes just cache your assets forever, and you will only have to load 1 file the first time, the other times nothing at all. And you can compress with gzip (usually automatically) so it normally isn't that big.. (most images are larger then the css files..)
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community