Dynamically include css or Js file using php

Question

Every time Gulp changes the CSS or JS files it keep the output file name same as before. How will browser know that file has been changed and need to reload the css and JS files?

To resolve this problem, I am decide to use the following Gulp plugin:

https://github.com/sindresorhus/gulp-rev

it rename the assets file by appending content hash to filenames

unicorn.css => unicorn-098f6bcd.css

is there any way to include the assets file using php dynamically? Assets name will change every time when new content added.

simple solution , try appending a random variable to the css url ie ,unicorn.css?no_cache=<?php echo time();?>Not recommended , but a work around — Dimag Kharab
– Dimag Kharab, Commented Feb 12, 2014 at 5:53
Not a good idea. Browser will load the assets in every requests. — Anam
– Anam, Commented Feb 12, 2014 at 5:58
Why don't you just configure your server to use E-Tags or Last Modified? — terinjokes
– terinjokes, Commented Feb 12, 2014 at 6:23

Amir Surnay · Accepted Answer · 2014-02-12 05:53:50Z

1

instead renaming file, you can send finger print with it. if file changes, last modified changes too. so you can easily use file's last modified as finger print:

public function putStyle($fileName)
{
    $fp = filemtime($fileName); // finger print by file last modified
    $fileName .= '?' . $fp;
    echo '<link rel="stylesheet" href="' . $fileName . '"/>';
}

answered Feb 12, 2014 at 5:53

Amir Surnay

4144 silver badges12 bronze badges

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

1 Comment

Anam Over a year ago

Good idea.However, I am trying to avoid query string because the CDN will see that GET parameter and think that its a dynamic request, so it will ask your servers for the file, which defeats the purpose of having a cached copy in the CDN.

Anam · Accepted Answer · 2014-03-09 01:04:58Z

0

I have found a way to include file dynamically. its fast (takes about 1.5 ms) and working perfectly.

PHP has a native function (glob) for searching files. According to PHP docs "The glob() function searches for all the pathnames matching pattern according to the rules used by the libc glob() function, which is similar to the rules used by common shells."

glob()

// css path would be the full physical path of your css directory
$cssPath = '/css/*.css';
$stylesheets = glob($cssPath, GLOB_NOSORT);

// link all stylesheets
<?php foreach($stylesheets as $stylesheet): ?>

     <link rel="stylesheet" href="css/<?=basename($stylesheet)?>">

<?php endforeach; ?>

answered Mar 9, 2014 at 1:04

Anam

12.2k9 gold badges51 silver badges64 bronze badges

Collectives™ on Stack Overflow

Dynamically include css or Js file using php

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related