Using manifest.json to return a file path in php

Question

First off, please excuse my methodology, I'm sure there are much better ways to do this but I'm self taught and definitely not a pro :D

Anyway, I'm learning how to revision assets using gulp-rev-rewrite and I've gotten most of the way there.

My gulp tasks are all working, revisioning is fine and I can generate a rev-manifest.json file which contains revisioned filenames, eg:

"app.css": "app-df7223f44c.css"

I now can't work out how to use the data in the manifest.json file to specify a file path in my php. I found another resource from a similar gulp package which contained a .php function I hoped to adapt:

<?php /**
 * @param  string  $filename
 * @return string
 */
function asset_path($filename) {
    $manifest_path = '../dist/rev-manifest.json';

    if (file_exists($manifest_path)) {
        $manifest = json_decode(file_get_contents($manifest_path), TRUE);
    } else {
        $manifest = [];
    }

    if (array_key_exists($filename, $manifest)) {
        return $manifest[$filename];
    }

    return $filename;
}
?>

I insert this function using

 <?php require 'require/filepaths.php';?>

And then try to use the file path like so:

 <link rel="stylesheet" href="<?php asset_path('dist/app.css');?>" rel="preload">

Only it's not working and I'm stumped.

The file path that returns is:

<link rel="stylesheet" href="" rel="preload">

Can anyone point out what I'm doing wrong?

I tried manually including the a filepath in filepaths.php which worked, so I assume the problem is in that file somewhere?

Any advice greatly appreciated.

Answer 1

After you posted your manifest, I'm not sure how you're expecting this to work. If you var_dump the manifest after you json_decode it, you're going to see that the array key is app.css not the dist/app.css you're looking for.

<?php asset_path('app.css');?> should work just fine.

Answer 2

Thanks Allen - think I have it now.

You were right in that the url wasn't correct relative to the site root. I found the answer here .

Basically I needed to pass dist/ into the filepath in the manifest, so the key was an edit to the GULP recipe from:

gulp.task('revision', function() {
  return gulp.src(['dist/app.css', 'dist/app.js'])
    .pipe(gulp.dest('./dist'))
    .pipe(rev())
    .pipe(gulp.dest('./dist'))
    .pipe(rev.manifest({
      merge: true
    }))
    .pipe(revDel({ dest: 'dist' }))
    .pipe(gulp.dest('dist'))
    .pipe(notify({ message: 'Rev task complete' }));
});

to:

gulp.task('revision', function() {
  return gulp.src(['dist/app.css', 'dist/app.js'])
    .pipe(gulp.dest('./dist'))
    .pipe(rev())
    .pipe(gulp.dest('./dist'))
    .pipe(rename({
        dirname: "dist/" // rename dir in manifest
    }))
    .pipe(rev.manifest({
      merge: true
    }))
    .pipe(revDel({ dest: 'dist' }))
    .pipe(gulp.dest('dist'))
    .pipe(notify({ message: 'Rev task complete' }));
});