How to put all css files in one file and all javascript files in one file

Question

When I want to include any new CSS file or any new JS file, I put it in the header as this

css file

<link rel="stylesheet" href="<?php echo URL; ?>public/css/header.css"  />
    <link rel="stylesheet" href="<?php echo URL; ?>public/css/index.css"  />
    <link rel="stylesheet" href="<?php echo URL; ?>public/css/footer.css"  />
    <link rel="stylesheet" href="<?php echo URL; ?>public/css/signup.css"  />
    <link rel="stylesheet" href="<?php echo URL; ?>public/css/contactUs.css"  />
    <link rel="stylesheet" href="<?php echo URL; ?>public/css/option.css"  />
    <link rel="stylesheet" href="<?php echo URL; ?>public/css/question.css"  />
    <link rel="stylesheet" href="<?php echo URL; ?>public/css/profile.css"  />

js file

<script src=<?php echo URL . "public/Js/profile.js" ?>></script>
    <script src=<?php echo URL . "public/Js/cell.js" ?>></script>
    <script src=<?php echo URL . "public/Js/place.js" ?>></script>
    <script src=<?php echo URL . "public/Js/ontology.js" ?>></script>
    <script src=<?php echo URL . "public/Js/informativeObject.js" ?>></script>
    <script src=<?php echo URL . "public/Js/question.js" ?>></script>

I want something like

<header> 
include all css
include all js
</header>

How/where would you define "all css"? At what stage do you want this to be expanded (given that the browser can't do that)? — Andrzej Doyle, May 09 '12 at 16:33
in a folder called public/css and all js in this folder public/js — William Kinaan, May 09 '12 at 16:34
i want to work on google chrome and if the answer doesn't work with IE i don't care , i don't want my website to work with IE :) :) — William Kinaan, May 09 '12 at 16:35
use some tool like [minify](http://code.google.com/p/minify/) for PHP, [webutilities](http://code.google.com/p/webutilities/) for Java or [Resources](http://grails.org/plugin/resources) for Grails... — mpccolorado, May 09 '12 at 16:38
i don't think you should avoid IE because most users are using IE. specially if this is your website you are using to find a job. IE is a pain but you will loose a lot of traffic if your site don't work in IE — Huangism, May 09 '12 at 16:40
for js you can append your path to html head with js. its easy — Mohammad Efazati, May 09 '12 at 16:43
as that link i work this : i put this on my html header then in the cssfiles file i put thie @import url('http://localhost/Mar7ba/public/css/footer/css'); is this right? cos it don't work — William Kinaan, May 09 '12 at 16:55

score 2 · Answer 1 · answered May 09 '12 at 16:35

2

Minify is a PHP library that will combine all your CSS / JS files into one. Does that help at all?

answered May 09 '12 at 16:35

Wintermute

2,973
4
32
52

it is forbidden on my country :( – William Kinaan May 09 '12 at 16:39

Gio Borje · Answer 2 · 2012-05-09T16:58:58.077

2

For CSS, you could use @import:

HTML with CSS:

<style type="text/css">
@import url('index.css');
@import url('footer.css');
</style>

Standalone CSS:

@import url('index.css');
@import url('footer.css');

Browsers include JavaScript as a #include AFAIK so there's no better way than including them all through <script> tags or by using Wintermute's example of a JS minifier.

Edit: JSMin by Crockford is a CLI utility that you can use if you want to work with it offline.

edited May 09 '12 at 16:58

answered May 09 '12 at 16:37

Gio Borje

20,314
7
36
50

i use that code in a css file or php file ? – William Kinaan May 09 '12 at 16:46
@WilliamKinaan, the code example is for HTML which can be generated within a PHP file. You could also strip the ` – Gio Borje May 09 '12 at 16:50
i understood from you this 1- in my html header i will put this 2-in mycssfile.css i will put ur code right? – William Kinaan May 09 '12 at 16:57
I marked two code examples. In your HTML header, you have two options: 1) place the *HTML with CSS* directly into your HTML header or 2) put the *Standalone CSS* into `mycssfile.css` and include that into your HTML header as ``. Either option depends on your preference. – Gio Borje May 09 '12 at 17:00
yes man it works but i had to put this rel="stylesheet" – William Kinaan May 09 '12 at 17:07

score 1 · Answer 3 · answered May 09 '12 at 16:41

1

Assuming you've got an array of files (using the local filesystem path)

print "<style type='text/css'>\n";
showall($css);
print "</style>";


function showall($filelist)
{
   foreach ($filelist as $fname) {
      print file_get_contents($fname) . "\n";
   }
}

answered May 09 '12 at 16:41

symcbean

47,736
6
59
94

this code where should i use it ? and how can i call it from my html ? – William Kinaan May 09 '12 at 16:58

How to put all css files in one file and all javascript files in one file

css file

js file

3 Answers3