GithubHelp home page GithubHelp logo

adamfrey / boot-asset-fingerprint Goto Github PK

View Code? Open in Web Editor NEW
10.0 10.0 2.0 62 KB

A boot task to add cache-busting fingerprints to html files

License: MIT License

Clojure 88.78% CSS 0.82% HTML 10.29% JavaScript 0.11%
asset-pipeline boot clojurescript

boot-asset-fingerprint's People

Contributors

adamfrey avatar esanmiguelc avatar lsnape avatar radicalzephyr avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

radicalzephyr elitltd

boot-asset-fingerprint's Issues

Enlive mangles Stencil/Mustache templates

Hey, so I use Mustache templates that I want to process with asset-fingerprint, but Enlive turns all < and > into &lt; or &gt; respectively... Thus the mustache partial syntax is destroyed:

{{> awesome/partial }}

becomes:

{{&gt; awesome/partial }}

This doesn't work so well.

What I'm wondering about is why use Enlive at all? For large HTML files it's slow, and seems like a lot of really unnecessary work. I forked this task, and prototyped just using clojure.string/replace and a simple regex and it seems to work just fine. I was wondering if you have a good reason for using Enlive in the first place, and whether you would be open to a PR that adds some features (being able to specify a host where assets should be fetched from) and also either:

  • replaces the Enlive processing with the string replace
  • OR adds string processing as a task option

Support recursive asset fingerprinting

I tried to fingerprint an image URL in my stylesheet, which itself is pulled in by index.html, only to find that the fingerprinted CSS doesn't contain the fingerprinted image URL.

This is easy to reproduce by augmenting the example project slightly by changing app.css to:

body {
    background-image: url('${img/foo.png}');
    color: red;
}

And of course adding some file at img/foo.png. Now, in the target dir app.css has the fingerprinted path:

body {
    background-image: url('/img/foo-3a6b2cc87905e826f9b5e8079fc5b74e.png');
    color: red;
}

But the fingerprinted CSS file app-3d31d9b4931c0cfd1054f314aa884d3b.css , being referred to in the index.html, does not.

I assume that some sort of topological sort is needed to process the top level files first, and then the first level fingerprinted files, and so on. I haven't looked at the code in detail, but I'd be happy to have a stab at solving this.

Thanks!

Example nested index.html can't load app.css

Running boot dev on the example project, going to http://localhost:5000/nested/ I get this error:

screenshot of safari 23-06-17 5-14-50 pm

This is the generated HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Boot Asset Fingerprint Example (Nested)</title>
    <link href="/../app.css" rel="stylesheet">
  </head>

  <body>
    <p>Nested</p>
    <script src="/nested/nested-8f13b3b8f78d338a489269005feee85d.js"></script>
  </body>
</html>

Adding ${../app.css} doesn't change the output either.

It looks like there's two issues here. One is that ../app.css isn't recognised as a hashed filename, the second (possibly?) is that a leading / is added to the ../ on the filename.

Fingerprinting failing silently when using a custom resource-root

Hello, thanks for this project!

Currently there seems to be an issue when assets are in a sub directory, i.e.:

resources/
   public/
      css/
        styles.css
      js/
      index.html

In the index.html the css is linked as "${/css/styles.css}", etc. I have to use absolute paths. With this setup the asset-host url is added correctly but the actual fingerprinting is missing after the task runs.

I have looked a bit into the problem and the root cause is an empty file-rename-hash caused by a path mismatch as the linked /css/styles.css is actually public/css/styles.css in the used file set.

Hacked an ugly band aid by:

  1. Adding an optional asset-root option which defaults to an empty string
  2. Adding the asset-root to desired-files
  3. Removing the asset-root again from file-name-hash after the juxt
  4. Adding the asset-root again to file-name-hash for add-fingerprint-to-filenames

Works, but it doesn't feel like a proper solution.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.