• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 699
  • Last Modified:

All CSS/JS in one file?

How can I put all my referenced CSS and JS files in to one file and then just reference that one file on my pages?
0
EricLynnWright
Asked:
EricLynnWright
  • 9
  • 4
  • 3
  • +3
5 Solutions
 
Kyle HamiltonData ScientistCommented:
there are tools that will concentrate/concatenate your js files, or css files.

http://ant.apache.org/
http://www.julienlecomte.net/yuicompressor/

some instructions:
http://www.samaxes.com/2009/05/combine-and-minimize-javascript-and-css-files-for-faster-loading/

you can also load scripts via XHR injection, with callbacks to preserve order.

Also, here's a nice article with some techniques:
http://robertnyman.com/2010/01/19/tools-for-concatenating-and-minifying-css-and-javascript-files-in-different-development-environments/
0
 
GaryCommented:
Nothing to do with the question asked.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Kyle HamiltonData ScientistCommented:
neither is that statement, but you made it anyway...
0
 
GwynforWebCommented:
The answer is yes it can be done but with what I consider hack coding tricks, a quick Google search will cough some up.  ( eg comment the JS out with CSS comment tags and the CSS out with JS comment tags, then include twice once in a CSS include tag and once in a JS include tag)

But from a program design perceptive this is completely at odds with the separation of CSS and JS from the HTML and themselves. Basically don't do it, it is a terrible idea.
0
 
jmcmunnCommented:
Asp.net 4.5 which is being release now has this feature built in.  It will automatically combine and minify the files when in release and stream them all in one file.  In debug, you still get each individual file in readable format.
0
 
Chris StanyonCommented:
I'm with @GwynforWeb on this one. It can be done in a hacky kind of way, but I really can't think of a singe good reason to do it - stick to having one file for JS and one for CSS. It'll save you headaches down the line.
0
 
Kyle HamiltonData ScientistCommented:
I think it's more worthwhile to spend the time figuring out how to load your resources (js css and even images) asynchronously, without messing up the order of things and/or the ux.

If you have a large application, you'll probably have a large CSS and js file(s), and having to wait for the whole kit and kaboodle to load in one go might end up being counter productive.
0
 
Kyle HamiltonData ScientistCommented:
Http requests aren't the only thing that affect 'perceived' performance. 'perceived' being key - at the end of the day. You load the stuff that is most likely needed first, first. And defer (not necessarily in the literal sense) everything else.
0
 
Kyle HamiltonData ScientistCommented:
You can also split your resources across sub domains to increase the number of concurrent downloads. But don't go crazy- 2-3 sub domains is optimal.

(IE7 still only loads 2 resources concurrently, but most other browsers load 6 to 8.)
0
 
EricLynnWrightAuthor Commented:
Thanks for all the comments.


@GaryC123/kozaiwaniec -   I will take a look at the links.



>>Basically don't do it, it is a terrible idea.

Along the same idea, what is a better idea?  



>>I think it's more worthwhile to spend the time figuring out how to load your resources (js css and even images) asynchronously

Is that not possible without referencing files?  I'm just wanting consolidate, make easier to reference, manage, clean up the pages.



>>Asp.net 4.5 which is being release now has this feature built in.

Unfortunately this is PHP
0
 
Chris StanyonCommented:
It's not a good idea to have all your JS and CSS in the same file - it's a hack and will get messy. The way to do it is have one file for your CSS and one file for your JS. Depending on the scale and complexity of your site, you may need several of each, but only load certain files on certain pages.

<link rel="stylesheet" href="/css/core_styles.css" type="text/css" />
<script type="text/javascript" src="js/core_function.js"></script>

You can always minify your JS files to make them smaller (keep the original!). If you are using a library such as jQuery - load it from a CDN, such as google.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

If you have lots of CSS imagery on your site (background-images, icons, etc) you could use the 'sprite' approach - all the images are part of one file and you use CSS to show only the bits you need. That will maybe reduce down the number of HTTP requests.
0
 
Kyle HamiltonData ScientistCommented:
If you mean making it easier at development time, then keeping separate files depending on functionality I find easier. I find scrolling through thousands of lines of code extremely annoying. You minify and concatenate production code. Whether you do that client side, server-side, or as a last step of development is another consideration.

Also, much of this stuff depends on the size of your application. Obviously, the bigger it gets the more moving parts you'll have to manage. If you're not too worried about server load (not so many users) then you can do lots of the pages' assembly with PHP - but this is getting kind of general... Each project has its own unique requirements.
0
 
EricLynnWrightAuthor Commented:
Maybe I asked this incorrectly.

Say, for example, I have 5 JS files and I always use the same 5 files.  Instead of listing EACH individually, I would rather have one link to a single JS file.  Then that linked file includes the link to each of the 5 files.  Still keeping everything clean, separated.  If I want to add a JS file later, I just include it once and all files referencing the one file now have the new link.

Then the exact same thing for CSS.
0
 
Kyle HamiltonData ScientistCommented:
Look at the links in my very first post.
0
 
EricLynnWrightAuthor Commented:
>>Look at the links in my very first post.

Will do.  

I'll go through them all.

I certainly appreciate all the help.  I feel like i'm being a pain and being vague.  I apologize to all.
0
 
Chris StanyonCommented:
You could use 'minify' to combine and compress your JS or CSS files. You then link to the minified copies of your files.

One thing to bear in mind - if you change any of the original files, you will need to re-minify them to reflect the changes, but if you're always using the same 5 files, they're unlikely to change often..
0
 
Kyle HamiltonData ScientistCommented:
In PHP you could do something like:


$js1 = file_get_contents("js1.js");
$js2 = file_get_contents("js2.js");

echo $js1 . $js2;

This is an oversimplification, but it's a thought. You might want to write to file first, then echo a reference to the newly created file.

You could also iterate over the js directory and get all the js files that way instead of hard coding each one.
0
 
Kyle HamiltonData ScientistCommented:
just reposting the link from my first post. people have already written php and other scripts to do what you're asking:

http://robertnyman.com/2010/01/19/tools-for-concatenating-and-minifying-css-and-javascript-files-in-different-development-environments/

but you can always google "concatenating" scripts and see what surfaces.
0
 
GwynforWebCommented:
Your question read to me as if you wanted one file that contained both CSS and JS code. I would still ask that if the the code, for say the JS, is in different files then it is split for a reason.  If not,  why not just form another file that is those files concatenated.

For CSS there is the @import statement that allows inclusion of other .CSS  file in a .CSS, eg

@import url('myStyle.css');

As far as I  know there is not an equivalent for .JS. Though you can use this trick in a  .JS

document.write('<scr'+'ipt type="text/javascript" src="myScript1.js" ></scr'+'ipt>');
document.write('<scr'+'ipt type="text/javascript" src="myScript2.js" ></scr'+'ipt>');

The script tag has to be split to avoid parsing errors.
0
 
EricLynnWrightAuthor Commented:
Thanks for all the posts and tips.  

I really appreciate all of the help.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 9
  • 4
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now