Part of the EllisLab Network
   
 
A quick & ugly way to join multiple css or js file.
Posted: 02 November 2007 03:00 AM   [ Ignore ]  
Summer Student
Total Posts:  14
Joined  07-10-2007

Following is the controller I created to join multiple cs or jss
file in to one, and hence making fewer server request to speed up the things little bit.

Just add following in to your controllers. save as file.php Set the path of your
js and css files accordingly.

<?php
class File extends Controller
{
    
function File()
    {
        parent
::Controller();
                
/*Set your own path here*/
        
$this->_path = "./public/";    
    
}
    
function index()
    
{
        
echo "";
    
}
    
function js()
    
{
        $segs
= $this->uri->segment_array();
        foreach (
$segs as $segment)
        
{
            $filepath
= $this->_path.$segment.'.js';
            if(
file_exists($filepath))
            
{
                readfile($filepath)
;
            
}
        }
    }
    
function css()
    
{
        $segs
= $this->uri->segment_array();
        foreach (
$segs as $segment)
        
{
            $filepath
= $this->_path.$segment.'.css';
            if(
file_exists($filepath))
            
{
                readfile($filepath)
;
            
}
        }
    }
}
?>

Now you can add any number of files with just single line of code,and with single
request.
For e.g. If you want to include two css file , foo.css and bar.css , the code is ,

<link rel='stylesheet' type='text/css' media='all' href='<?php echo site_url("file/css/foo/bar");?>' />

And same way for javascript , just replace js with css.


I would like to know, is there better &/or easy way to do same ?
is this a good idea ?

Profile
 
 
Posted: 02 November 2007 03:06 AM   [ Ignore ]   [ # 1 ]  
Research Assistant
RankRankRank
Total Posts:  303
Joined  10-17-2006

I came up with a similar solution only I got a script from somewhere that gzips the css/js, caches the compilation of the files etc. Since I generally use jQuery I my controller also has the function jQuery. I can now do

<?PHP echo site_url(asset/jquery); ?>

This redirects to a similar function as you have but a bit shorter.

Profile
 
 
Posted: 02 November 2007 03:26 AM   [ Ignore ]   [ # 2 ]  
Sr. Research Associate
RankRankRankRankRank
Total Posts:  4839
Joined  07-14-2006

Why would you want to join the files using a request? Why can’t you make just one file from start? or do something in your css like

@import 'foo.css';
@
import 'bar.css';
Profile
 
 
Posted: 02 November 2007 04:27 AM   [ Ignore ]   [ # 3 ]  
Summer Student
Total Posts:  1
Joined  02-22-2006

I don’t know much, but I believe the point is to join all css/jss in those cases where you have several smaller css/jss files (usually more than 4 or 5 files), in order to minimize server requests.

Personnely, it’s not my kind of thing, and I’ve never seen the need for such a thing. I think that with better planning, a strong and efficient css/jss can be written, and that should be enough.

But this is just me. I don’t know that much.

Profile
 
 
Posted: 02 November 2007 04:48 AM   [ Ignore ]   [ # 4 ]  
Sr. Research Associate
RankRankRankRankRank
Total Posts:  4839
Joined  07-14-2006

I can understand designers don’t have a lot of knowledge of css so it can happen that you end up with separate stylesheets but if you have for example a frontend.css and a backend.css where they can include their css file using the method above there will not not to much trouble.
Of course debugging designs if you have different css files can be harder than having one file.

For javascript i have to agree with urbgimtam. There is no reason to add code to one big file if you want all your javascript code to be loaded throughout the site.

Profile
 
 
Posted: 04 November 2007 01:37 PM   [ Ignore ]   [ # 5 ]  
Grad Student
Rank
Total Posts:  70
Joined  02-20-2007

I have a similar controller called ‘AssetManager’ in my CMS which handles much the same thing.  I’d recommend updating your controller so that it out puts the correct mime types for whats being returned.

The advantage of having them combined into a single file it reduces the number of HTTP requests your web client has to do.  In addition i use it to run some regexs on the js and css which allows me to insert data into them dynamically should i need to.

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 721, on January 06, 2010 09:38 AM
Total Registered Members: 115027 Total Logged-in Users: 63
Total Topics: 122466 Total Anonymous Users: 3
Total Replies: 647381 Total Guests: 461
Total Posts: 769847    
Members ( View Memberlist )