How to link to concatinated resources

[murtaza52]

Hi,

Thanks for the project, needed your help in linking.

I have created a assets/css folder and placed all css in it. I would like to concatinate all the css files such that only one file is served. I have also created a app.css.dieter file in the above folder listing all the css files.

How do I link back to the concatinated file?

Thanks,
Murtaza

[jxa]

Hi Murtaza,

There are 2 ways you can link to your file. If you just want to test it out you can link to "/assets/css/app.css". Dieter will redirect to the proper path. What you'll want to do in production is to use the link-to-asset function. For example

(link-to-asset "css/app.css") ;; => "/assets/css/app-2145adsf145asdf1345asdf.css"

Regards,
John

[murtaza52]

Hi John,

Thanks for the quick reponse.

John however I want to link to the concatinated file.

Lets say I have 3 css files -
a.css, b.css, and c.css

All these files are listed in the .dieter file.

Now how do I link to the single concatinated css file?

Thanks,
Murtaza

[jxa]

Your app.css.dieter file describes how to build the app.css asset. When you request the "/assets/css/app.css" path, dieter first looks for a file with that exact name. When that file is not found, it checks for files that start with "/assets/css/app.css" and your app.css.dieter file is found, assets are concatenated, and the asset is served.

Hopefully this clears up the intent. Let me know if you have any issues.
-John

[kendagriff]

Hi,

I'm also confused here. JS is working perfectly, but CSS not so much.

└── stylesheets
    ├── sponsors
    │   ├── base.css
    │   └── custom.css
    └── sponsors.css.dieter

Using: (link-to-asset "stylesheets/sponsors.css" asset-config-options)

Returns nil. No asset is served. When I try (link-to-asset "stylesheets/sponsors.css.dieter" asset-config-options), it serves the asset, concatenated and all, but Chrome doesn't recognize it as CSS. Just a plain ole' text file.

Also, it's creating this file: resources/asset-cache/assets/stylesheets/sponsors.css-57014be124ef806a97009e773c8e9f49.dieter

Am I missing something obvious?

[pbiggar]

It should be (link-to-asset "stylesheets/sponsors.css.dieter" asset-config-options), so this is by design. However, you need to use the mime middleware to add the mime-type for it (see mime.clj), if you want chrome to recognize it.

If you have time to fix the docs about this and submit a PR, that would be much appreciated!

[kendagriff]

Okay, thanks for replying! I'm making progress, but I'm still a little confused. Is a web request to /assets/stylesheets/sponsors.css.dieter supposed to return a file with a signature (sponsors-css232452...)? Or just the file as is (sponsors.css.dieter)? I ask, because it seems wrap-dieter-mime-types only works when cache-mode is set to :production.

How is the development environment supposed to look?

P.S. I'd be happy to document the mime type as soon as I can sort this out...

[kendagriff]

Perhaps this requires a small modification to mime.clj to support development mode? I'd be happy to supply a patch if necessary...

[pbiggar]

It's supposed to return the compiled file, not the file as is.

I was confused about wrap-dieter-mime-types: it's included as part of the dieter middleware (see dieter.core/asset-pipeline). It should be worknig in dev mode though, and I confirmed it works for me on .js.dieter files. I don't use .css.dieter files, so there may be a bug there.

[kendagriff]

Okay, got it fixed. wrap-dieter-mime-types needs to appear after asset-pipeline in the order the middleware is called. I'll write something up some short documentation and submit a PR.

[pbiggar]

now I'm actually confused as to why wrap-dieter-mime-type is required at all - isn't it called as part of asset-pipeline?

[kendagriff]

Now, how bout' that. It sure is. I MUST have done something wrong, then. I'll check again...

[kendagriff]

Okay, I think I've gotten to the bottom of it. It appears a bug exists in branch 0.4.0, in asset-pipeline, but was corrected in master. Note this clause from 0.4.0:

(if (settings/production?)
      (-> app
          (wrap-file (settings/cache-root))
          (asset-builder options)
          (wrap-file-expires-never (settings/cache-root))
          (wrap-file-info known-mime-types)
          (wrap-dieter-mime-types))
      (-> app
          (wrap-file (settings/cache-root))
          (asset-builder options)
          (wrap-file-info known-mime-types)
          (wrap-dieter-mime-types)
          (wrap-file-info known-mime-types)))))

The bottom appeal to (-> app... includes two calls to wrap-file-info, once before wrap-dieter-mime-types, once after. If the bottom line is removed, which it is in master, it works.

Any chance a new version can be deployed?

[pbiggar]

@jxa New version?

[jxa]

Pushed 0.4.1. Also, @pbiggar I granted you deploy permissions on clojars.

Thanks!

[kendagriff]

Thanks so much, guys, for all your help! You've been super responsive.