Cacheable assets

[mallorydxw]

We should add a long number to the path to the assets (could be the current time in seconds, or a random number).

i.e. static/123abc/main.min.js

This should be added to the helper function so it outputs the correct path.

We could store this as plain text or as PHP (i.e. <?php return '123abc';) so that we don't have to rewrite existing files to add this.

The number should change every time the assets are built.

We should check this doesn't make local development a total pain.

[mallorydxw]

It would have the downside that you'd have to do git add static before each commit where the assets change. And every time it rebuilt the assets it would require a git add static.

That would be annoying.

[mallorydxw]

If we used a hash of the CSS/JS files as part of the filename, we would only need to re-git add static when the assets actually changed. Whereas if we used the time or a random number we'd have to do git add static all day long.

[mallorydxw]

My biggest concern is that somebody's going to forget to do git add static. We could write a test for this and put it in .gitlab-ci.yml.

i.e. If we just used a plain text file: test -f static/main-cat ASSETS.min.js

Or if we used a PHP file: test -f static/main-php -r 'echo require DIR."/assets.php".min.js

This wouldn't prevent it from being annoying, but it would prevent accidentally merging something broken into master.

Another thing to think about - should we have a hash for each file, or a hash for everything.

$hash = require('assets-hash.php'); would be pretty simple. But maybe we need a hash for each file as there's no point in changing the hash of the CSS file if only the JS is changing.

Something like this might be okay:

$assets = require(__DIR__.'/assets.php');
foreach ($assets as $asset) {
    wp_enqueue_script($asset['name'], $asset['...'], $asset['...]);
}

But here's a thought - what if we add some JSON files for managing the assets.

assets/index.json can be the file that is authored by a human. It can list all the JS files and all the CSS files:

% cat assets/index.json
{
    "css": {
        "main": "assets/scss/main.scss"
    },
    "js": {
        "main": "assets/js/main.js",
        "admin": "assets/js/admin.js"
    }
}

Then the Gruntfile.js imports this file to figure out what CSS/JS needs to be built. (This would have the side-effect of allowing us to put all our grunt rules into an NPM module - which would be good because it would be one less piece of code we need to copy and paste).

Once grunt has imported this file, figured out what needs to be built, it generates a JSON file static/index.json:

% cat static/index.json
{
    "css": {
        "main": "static/main-27ba906123b882fa21f1b688450daf42de19de34.min.css"
    },
    "js": {
        "main": "static/main-513d45046c46591f20562308520a91bf12c4dd29.min.js",
        "admin": "static/admin-22d75e35d6042f9a0e9260c034767f8dd788eeeb.min.js"
    }
}

And our PHP code (app/Themes/Assets.php) can be configured to automatically register CSS/JS on the frontend or admin:

if (isset($static['css']['admin'])) {
    wp_enqueue_style(...);
}

And we'll also be able to move the app/Themes/Assets.php code into a module in Iguana. And again we have less copied/pasted code.

[mallorydxw]

Instead of storing the Grunt code in an npm module - we could add require('vendor/dxw/iguana-assets/foo.js') to Gruntfile.js. Then assets-related PHP and JS will be updated at the same time.

[mallorydxw]

Just thinking out loud here:

• [ ] Thinking: Flesh out the manifest file so that it's flexible enough to be future-proof (i.e. think about what it would look like if we decided to start using coffeescript or switch back to LESS)
• [ ] Gruntfile.js: Compile what is found in the assets/index.js manifest file
• [ ] Gruntfile.js: Generate a static/index.js manifest file
• [ ] src/IguanaAssets.php: Make a new class to locate and enqueue the JS/CSS (i.e. $myInstance->enqueue('javascript', 'main'))
• [ ] src/Assets.php: add_action('enqueue_scripts', function(){$this->iguanaAssets->enqueue('javascript', 'main')}); add_action('admin_enqueue_scripts', function (){$this->iguanaAssets->enqueue('javascript', 'admin'});
• [ ] Move all assets-related PHP and JS into a module called dxw/iguana-assets (should we really call it iguana? Maybe simply dxw/assets?)
  • Gruntfile.js should just have require(...).doIt()
  • src/Assets.php should just have $iguanaAssets->enqueue('javascript', 'main')