ColdFusion cfstatic includes all CSS files
I am trying to use cfstatic. In my index.cfm, I am adding only green.css using cfstatic, cfstatic should add minimized version of green.css only, So my h1 text <h1>I should be Green</h1> should be in green color. But cfstatic is adding both green.css & red.css. Am I missing configuration?
Application.cfc
component output="false"{
This.name = "testing";
This.sessionManagement = true;
This.sessionTimeout = CreateTimeSpan(1, 23, 59, 59);
This.mappings["/org"] = expandpath('.')&'org';
function onRequestStart(){
application.cfstatic = CreateObject( 'org.cfstatic.CfStatic' )
.init( staticDirectory = ExpandPath('./assets'),
staticUrl = "/cfstatic/assets/"
);
}
}
Index.cfm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<cfscript>
application.cfstatic.include( '/css/green.css',true );
</cfscript>
<cfoutput>#application.cfstatic.renderIncludes('css')#</cfoutput>
</head>
<body>
<h1>I should be Green</h1>
</body>
</html>
Green.css
/* This is assets/css/green.css */
h1 {color:green;}
Red.css
/* This is assets/css/red.css */
h1 {color:red;}
My Browser output is,
I'm not entirely familiar with CFStatic but I replicated your example and found this article on how package minification works. Reading through it, and the comments, I think you can go about this 2 different ways; though I couldn't say they're the best (or only) routes.
A) Split the styles into their own packages (folders). Which compiles the files from each folder into one minified file based on that folder.
So you could do a directory structure like so...
assets
-- css
--- green
---- green.css
--- red
---- red.css
Once compiled, the minified files would be green.min.css and red.min.css .
Then modify the include in your Application.cfc that calls green.css like so - application.cfstatic.include( '/css/green/green.css',true );
B) Set minifyMode="file" in the constructor which will create separate minified files in one location.
Your current index.cfm would work as expected in this case.
Depending on how intricate of an app you're working with I think split packaging is the way to go unless it's only a few files.
Cheers.
I've never used CFStatic, but it may be in renderIncludes() . Have you tried removing that line? What happens? If it is not renderIncludes() directly, configuring includeAllByDefault may be the key.
From their docs:
Including all files by default (from 0.2.2)
Out of the box, CfStatic will include all your static files if you never use the .include() method to specifically pick files to include (ie you just do .renderIncludes()). You can change this behaviour by setting includeAllByDefault to false.
The phrasing of that seems like it could be a little better. It's unclear to me whether this function is necessary to render all files included, or this is just a getAll(*Type*) sort of function.