automatically css/js content in 1 file

Question

I separate many CSS/JS so it's easier to work in and look over. But when the website loads, it has to load all those JS and CSS files and that will extend the loading times more and more.

So I was trying to put a simple php script in my website that takes all the CSS content and put it in 1 file. Same goes for the JS content.

It looks like this ($data['js'] and $data['css'] are arrays with all the files):

<?php
    $jsData = "";
    $cssData = "";
    foreach($data['js'] as $js) {
        $jsData .= file_get_contents($js);
    }
    foreach($data['css'] as $css) {
        $cssData .= file_get_contents($css);
    }
    file_put_contents('static/js/javascript.js', $jsData);
    file_put_contents('static/css/style.css', $cssData);
?>

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

As I'm still a beginner I wanted to ask you for tips/suggestions, What do you guys think?

Thank you

you're trying to minify your files . for css it should be fine but for javascript you could face issues. for instance , the order of files should be maintained, you should make sure files are properly delimited to avoid overlapping of code — anurupr
– anurupr, Commented Feb 10, 2014 at 12:40

Amit Joki · Accepted Answer · 2014-02-10 12:45:48Z

2

Use this CssJsBundler

The above is on github, and opensource and it does what you have requested !

And also check out http://www.subchild.com/2008/08/07/simple-javascript-and-css-file-bundler/

which tells you how to configure the options.

answered Feb 10, 2014 at 12:45

Amit Joki

59.4k7 gold badges79 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wesley Over a year ago

Haven't seen this one coming by, Thank you very much!

Collectives™ on Stack Overflow

automatically css/js content in 1 file

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related