6

I'm looking for a bundler/minifier for use in my ColdFusion site. I've searched for over an hour and have only found a suitable plugin for cfWheels. Unfortunately, we are tied to framework-one at this point, so we cannot use that plugin.

Can anyone recommend a means for bundling & minifying our js/css with ColdFusion FW1?

I'm thinking of "borrowing" from asp.net's System.Web.Optimization's bundler, but that just seems like over-kill to me.

Thanks!

Brandon Osborne
  • 835
  • 1
  • 12
  • 26
  • 1
    Have you seen CFStatic (https://github.com/DominicWatson/cfstatic)? Does all that and more. – Carl Von Stetten Oct 21 '14 at 04:41
  • 1
    CFStatic is nice, but I never got the warm and fuzzies from using it - seems minification of JS & CSS files is not something CF should be doing. I have been using node with grunt to minify as files are updated. I have code that loads the 'raw' files when I pass a URL param to help me debug when needed. – Scott Stroz Oct 21 '14 at 12:13
  • Which webserver are you using? I use IIS and am using IISpeed (PageSpeed for IIS) to automatically concat+minify JS/CSS files without having to modify any code on any projects. The optimizations are performed by the webserver after ColdFusion is done generating the HTML content. (NOTE: It's extremely useful for live/real-time/cached delivery, but not recommended for "bundling" to redistribute.) – James Moberg Oct 21 '14 at 13:39

1 Answers1

4

We recently went through this same decision. In the end, we settled on using Gulp which is a Javascript-based task runner that you use in development and my recommendation is that you do the same. Gulp has a huge community and userbase and tons of plugins. It can watch files for changes as you develop and automatically re-concatenate, minify (and about 1000 other things - see http://gulpjs.com/plugins/).

Using a Gulp plugin called gulp-rev, files are automatically renamed, like file-k34jzkl3.css, to bust browser caches when changes are made. Using another gulp plugin, gulp-manifest, we automatically generate a JSON file that maps the original CSS file to the cachebusted name (e.g., "file.css": "file-k34jzkl3.css") and then we have a simple CFC that translates those names in the right place in our HTML. This is what our manifest JSON file looks like:

{
  "baseline.css": "/global/baseline-82bcd2ab92.css",
  "user.css": "/global/user-0d1d32170c.css"
}

And then our CFML markup looks like this:

<link rel="stylesheet" href="#application.asset.getAsset("baseline.css")#">

Which generates HTML output like:

<link rel="stylesheet" href="/global/baseline-82bcd2ab92.css">

I created a repo with the code at https://github.com/ghidinelli/assets.cfc

Brian Ghidinelli
  • 335
  • 2
  • 6