teamcfadvance / cfstatic Goto Github PK

I have the following directory structure

/resources/
  core/
    core.js
    core.less
    dummy.js
    dummy.css

if i explicitly include a file rather than the whole core directory other files of the same type are included

cfstatic.include("/core/core.less");

results in

<link rel="stylesheet" href="/resources/core/core.less.css" media="all" charset="utf-8" />
<link rel="stylesheet" href="/resources/core/dummy.css" media="all" charset="utf-8" />

the same happens with js files

Ability to build documentation for released tags and have it published to a public site (perhaps GitHub pages site)

Have JS dependencies be configurable through a single text file

Create a test suite of unit tests.

Sorry, me again Dominic!

I'm finding that if my staticUrl argument, passed when instantiating CfStatic, contains a trailing slash, an extra slash is output by renderIncludes(). E.g. if I config my staticUrl as /test/cfstatic/static/, the URL rendered will be:

<link media="screen, projection" href="/test/cfstatic/static//min/root.min.css?20110922102510" rel="stylesheet">

Note the double slash after the static directory. Same with js.

It doesn't seem to break the include in the browsers I'm using, but I wonder if it could be tightened to only add the slash if not present in the staticUrl arg?

Cheers
Julian.

Dominic, I've just been looking at the minified css generated by CfStatic and noticed that image paths are coming out oddly. In my test case, the path is ok except for misplaced double slashes (no trailing slash in my config this time) and quotes.

config

staticDirectory     =   ExpandPath( "./static/" )
,staticUrl  =   "/test/cfstatic/static"
,minifyMode =   "all"

folders

/test/
    /cfstatic/
        Application.cfc
        index.cfm
        /static/
            /css/
                /core/
                    styles.css
                    /img/
                        feed.gif

From css.min.css

background: url(/test/cfstatic/static/css/core//"img/feed.gif")

On another app I'm testing on, it seems to include the local file system path

background: url(/assets/201109151//cssC:/Dev/blog/webroot/assets/css/core//"img/loading.gif") 

Sorry, I know this is tricky without more info on the config. I'll try and come up with some better test cases soon, but just so you're aware in case it's an easy fix.

I.e. a single application hosting multiple clients where individual client assets can be deployed and refreshed without endangering the continual running of the site.

Namely ... I am trying to get HTML5shiv to work with CFStatic but it appears that the /*@ comments around it might be interfering with CFScript's parsing.

The source i'm using is located here: http://html5shim.googlecode.com/svn/trunk/html5.js

When saved to the server and included using cfstatic, the code doesn't execute at all. By directly calling the script via script tag, it functions properly.

Excellent project. Dominic! Just what I've been looking for.

Could be me doing something wrong, but if I set minifyMode to 'none' in the config, or use the debug url switch, renderIncludes() seems to add an extra folder to the outputted path which has the same name as the file being included.

Here's my folder structure:

/test
    Application.cfc
    index.cfm
    /cfstatic
        /static
            /css
                styles.css

Here's the config I'm passing when creating my CfStatic instance:

var config  =   
            {
                staticDirectory     =   ExpandPath( "./static/" )
                ,staticUrl  =   "/test/cfstatic/static"
                ,minifyMode =   "none"
            };

When I do #cfstatic.renderIncludes()# (either css, js or both) the path comes out as:

<link media="screen, projection" href="/test/cfstatic/static/css/styles/styles.css?20110922102450" rel="stylesheet">

See the extra "/styles/" folder? It's always named the same as the included file. Obviously means the path is invalid.

Doesn't happen with minification turned on.

I'm using r1_beta1.1

Cheers
Julian.

What might CfStatic do with them?
Does it need to do anything differently? Perhaps adjust paths?

Images that have already been embedded are being modified with the full image path similar to all images in css. For example:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIH+);

is being converted to...

background: url("/site/assets/images/data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIH+");

When installed on Tomcat on Windows in this case with Open Blue Dragon filepaths are not consistently using \ or / so therefore there needs to be somecode to normalise them to one or the other otherwise although

_getRequestIncludes() and _getIncludeMappings() have data the mismatch of / and \ causes the structkeyexists element in the _GetRequestIncludeFilters function not to work.

Also within the mappings the package is always / rather than the full package name again this works fine on Open BD on the desktop version on OSX

_getJsDependenciesFromFile() in CfStatic.cfc issues a createObject() call (@ 961) using only 1 param. This generates an error in ACF8 (expects 2 params).

Sorry if this is the wrong place for this but... I'm a bit puzzled about how to selectively include files.

From the docs (generally very good by the way, you've obviously put a lot of time into this) I got the impression that to specify the files or packages to be rendered for a request I needed to use cfstatic.include(), but when using renderIncludes() it seems to include everything below my configured static directory regardless of what I've specified with .include(). In fact all files seem to be included even if I don't specify anything.

Here's my folder struct:

/test
    Application.cfc
    index.cfm
    /cfstatic
        /static
            /css
                styles.css
                specific.css

...and config:

var config  =   
            {
                staticDirectory     =   ExpandPath( "./static/" )
                ,staticUrl  =   "/test/cfstatic/static"
                ,minifyMode =   "package"
            };

index.cfm

<cfset cfstatic.include( "/css/styles.css" )>
#request.cfstatic.renderIncludes( "css" )#

Renders the following:

<link media="screen, projection" href="/test/cfstatic/static/min/styles.min.css?20110922102450" rel="stylesheet">
<link media="screen, projection" href="/test/cfstatic/static/min/specific.min.css?20110922102450" rel="stylesheet">

Which is also rendered if I comment out the cfstatic.include() line so nothing is specified.

I could well be doing something silly.

Release: r1_beta1.1
ACF 9.0.1

http://www.dartlang.org/

After the cache fix which makes normal use of CfStatic super speedy, there's still a huge marked slowdown when you stick checkForUpdates=true.

Looking at the Execution time debug output, Package.addStaticFile (and thus StaticFile.init()) is being called for every file, on every page invocation. Each Package.addStaticFile is between 2ms and 14ms (Win7, ACF9), and for hundreds of CSS files that quickly adds up.

Given that with checkForUpdates=true we just want to see if an original source file has been modified since the last timestamp and then recompile it if it has, is there a quicker way to do the check without having to create a StaticFile object each time, and only create a StaticFile object (and also the associated Package if minifymode='package') if it has changed and needs recompiling?

Obviously, in production we'd have checkForUpdates=false, and have sub 1ms times for any CfStatic involvement on a page request, but when we're doing pre-release testing on our hosting-copy box it sure would be nice to be able to set checkForUpdates=true without nobbling performance too much.

Obviously never satisfied! :-) Not a priority, but thought I'd raise it anyway.

When rendering LESS generated CSS the @Depends feature is not being applied.

This is especially an issue with Bootstrap where bootstrap.css must be listed before bootstrap-responsive.css

I typically retain the version numbers on files like jquery. so if i have a script that depends on jquery i will have

@Depends /libs/jquery/jquery-1.7.2.min.js

if i update my version of jquery i need to then update the versions in all my script files that depend on it.
It would be useful if @Depends allowed you to specify the package, therefore removing the need to identify the specific file

e.g.
@Depends /libs/jquery/

e.g.

@jquery /js/core/jquery-1.7.6.js
@jqueryui /js/core/jquery-ui-88.3.5

Hi Dominic. A while ago you fixed the problem of Byte Order Marks (BOMs) choking the LESS engine, but I've found a case where this still seems to be happening.

Using version 0.5.0 of CfStatic, if I try to import a LESS file inside another LESS file (i.e. a LESS import, rather than a CSS import), and the imported file has a BOM, I get the following error:

LESS error when compiling test.less. Message: org.mozilla.javascript.EcmaError: TypeError: Cannot call method "toCSS" of undefined (file:/C:/library/cfstatic/0.5.0/lib/less/lesscss-engine-1.3.0.jar!/META-INF/engine.js#67)

If I remove the BOM, it compiles fine. Any chance you could clean up the BOMs here as well?

Cheers
Julian.

So that one might do:

someCssToPassAsParamToAnIframe = cfstatic.include('/css/iframeCss/').renderIncludes('css');
// ... other code
cfstatic.include('/css/some/css/').include('/js/core/'); // etc.
// ... more code
    #cfstatic.renderIncludes('css')# <!--- this does not include the iframeCss because it was cleared from the stack with the first renderIncludes call --->
</head>

Allow the configuring of include and exclude rules. By default you would have:

include="*"
exclude=""

Might be useful to do something like:

// don't process the less css global include files
exclude = "css/less/global/*";

or

// only process js, css and the bootstrap.less file (ignoring other .less files that might be @imported in the bootsrap.less file)
include = "*.js, *.css, *bootstrap.less";

http://www.websiteoptimization.com/speed/tweak/inline-images/

CSSImageParser.cfc

Change:
// build the full url without relative paths
fullUrl = ListAppend(cssFileUrl, Replace(arguments.relativeUrl, RepeatString('../', nTraversals), ''), '/');

to:
// build the full url without relative paths
if (nTraversals>0){
fullUrl = ListAppend(cssFileUrl, Replace(arguments.relativeUrl, RepeatString('../', nTraversals), ''), '/');
}
else{
fullUrl = ListAppend(cssFileUrl, arguments.relativeUrl, '/');
}

Thanks!

http://www.w3.org/TR/CSS2/cascade.html#at-import

Rollup contents from all imports before processing. This will make less.css work fully as well as regular css.

Or somesuch

When implementing something like @ie LT IE 8 when minifyMode = "none" the resulting output is rendered correctly like...

<!--[if LT IE 8]><link rel="stylesheet" href="/includes/css/common/ie.css" media="all" charset="utf-8" /><![endif]-->

...but when minifyMode = "package" the following error is generated when the css is being compiled.

"There was an error compiling the package, '/myPackageName/', not all files define the same IE restriction."

The ?debug=1 feature alone is super handy, but the more I rely on using Less, the more I struggle with recompilation. Anytime I use @import in my less files to pull in code, changes to those imported files don't trigger recompilation. I have to save the file containing the @import directive before the recompile will catch my changes.

It'd be awesome if we could specify a URL parameter that would force it. Even if ?debug=1 were augmented to also recompile, that'd work fine for my needs.

I get an error when trying to use less and bootstrap and I get the following error.

Parse Error: Syntax Error on line 520 (line 520, column 20) near .core (@gridColumnWidth, @gridGutterWidth) { .spanX (@index) when (@index > 0) { (~".span@{index}") { .span(@index); }

My guess is that the lesscss-engine is outdated and can't parse the "when"-loops, but I could be wrong.
Thank you for your hard work!

Still well under 100ms but be good to make it <1ms in production mode

I am getting started with cfstatic, and running into an issue. Here is how I have it initiated:

application.cfStatic = createObject("component", "org.cfstatic.CfStatic").init(
    staticDirectory = "C:\inetpub\wwwroot\nytrodev\default\includes\themes\nytro\static",
    staticURL = "/default/includes/themes/nytro/static/",
);

It is imporatant to note that inside of that 'static' directory, I have the following directories: css, js, min

Then in my header I have this:

#application.cfStatic.renderIncludes('css')#

However The include that gets created looks like this:

<link rel="stylesheet" href="/default/includes/themes/nytro/static/min/C:.inetpub.wwwroot.nytrodev.default.includes.themes.nytro.static.css.min.20111024025953.css" media="all" />

It is clear that the file-name that is getting created is including the entire directory path, and not just the file-name. However what actually gets created is just a file named "C" that is blank.

I am using:
Windows 7 x64,
IIS 7,
Railo 3.3.001

I have not tested on Adobe Coldfusion yet, but I can if you like.

There should be an option to define the desired charset (e.g. UTF-8) for how the files are written and included.

Using the Merced theme as a base with Mura 5.6.4814.

In IE (all versions) keep getting:

According to Mura forum user 'inge'
Refer to...
http://muracms.com/forum/messages.cfm?threadid=468BCDF4-B90E-4F9C-B1B02316D155B101

this is due to a syntax error - code should read <!--[if lt IE 8]>. Tested this out using a static version of the page and does fix the issue.

Tracked it down to:

cffunction name="$renderIeConditional" access="private" returntype="string" output="false" hint="I wrap an html include string with IE conditional statements when necessary, returning the result"

in requirements\org\cfstatic\util\Base.cfc

Thanks

If you specify staticURL="/" on cfstatic's init(), you get an error on ACF9 (and presumably 8 too, though I haven't tested in Railo) in $listAppend() in Base.cfc line 156, because len(arguments.list)-len(arguments.delimiter) is 0 and ACF doesn't like 0 as the 2nd param on left().

I've patched our local copy of cfstatic so $listAppend() just does a cfreturn of:

<cfreturn reReplace( listAppend( arguments.list, arguments.value, arguments.delimiter ), "#arguments.delimiter#{2,}", arguments.delimiter, "ALL" )>

, so it just replaces all multiple occurrences of the delim with a single instance of it.

Not sure if this is a safe / sensible fix with regards to the intended use of $listAppend, but it works for us so far.

Thanks,
Gary.

The less engine chokes on them so ensure they're clean before processing.

Ability to configure CSS dependencies / order through an external file

When a file has bad JS, and your app initializes and tries to minify files, a hard CF error is thrown. Currently the compressJs() method of the YuiCompressor.cfc has the following:

try {
    compressor = $loadJavaClass('com.yahoo.platform.yui.compressor.JavaScriptCompressor').init(input, reporter);
    compressor.compress(output, javaCast('int', arguments.linebreak), javaCast('boolean', arguments.munge), javaCast('boolean',arguments.verbose), javaCast('boolean', arguments.preserveAllSemiColons), javaCast('boolean',arguments.disableOptimizations));

} catch('org.mozilla.javascript.EvaluatorException' e){
    $throw(type="org.cfstatic.util.YuiCompressor.badJs", message="There was an error compressing your javascript: '#e.message#'. Please see the error detail for the problematic javascript source.", detail=arguments.source);
}

This doesn't catch the EvaluatorException, because that exception is nested in the call stack. The error thrown is of type 'Object' stating

An exception occurred while instantiating a Java object. The class must not be an interface or an abstract class. Error: ''.

That message has a Cause of error type 'java.lang.reflect.InvocationTargetException', with the message of [empty string]. This error has a Cause of type 'org.mozilla.javascript.EvaluatorException'.

Is there a way to stop CFStatic from automatically compiling the entire root css and js directories?

If i specify ?debug=true, any 'directory' includes do not render:

e.g.
<cfset cfstatic.include("/js/file.js") />
is fine, but
<cfset cfstatic.inclue("/js/directory/") />
just does not render at all

Is this expected behavior?

What is the best practice? Always specify the files or using directories to package?

That would be neat huh.

Hi,
Just trying out cfstatic for the first time on an existing site. I don't have any dependency information in the css / js files so thought that if I did:

    beanFactory.getBean( "cfStatic" ).include('assets/js/jquery-1.5.1.min.js')
        .include('assets/js/jquery.hoverIntent.min.js')
        .include('assets/js/jquery.tools.min.js')
        .include('assets/js/common.js')
        .include('assets/js/jquery.lightbox-0.5.min.js');

Then it would be cool if cfstatic preserved the order they are passed in when rendering.

Thanks!

When CfStatic cleans out the minified (output) directory, it should ignore folders; i.e. .svn, etc.

In the same way that CfStatic automagically compiles .less files, it should work with SASS and with Compass.

for ease of readability (possibly just in development) split each resource onto a new line.

Create an integration test suite. Precursor to testing across different CF versions

Dominic, I notice rendered files include a query string timestamp parameter for cache-busting purposes, e.g. styles.min.css?20110922102450.

Although it seems most modern clients will respect the HTTP spec which says that URLs with query strings should be cacheable the same as any other, there certainly were in the past, and arguably still are plenty of web servers, proxies and browsers out there which will see the "?" and decide it shouldn't be cached at all.

A more reliable way of making sure static files are cached, but refreshable at will is to include the timestamp or other versioning variable in the file path, rather than as a parameter.

I don't expect cfStatic to handle that, but could it at least give us the option of turning off the query string cache-busting and let us do our own thing (personally I've started using URL Rewriting of the path)?

Cheers
Julian

On the latest develop branch:

If you specify checkForUpdates=true on the CfStatic.init(), it calls _processStaticFiles() on each Cfstatic.include() API call to check for any files to recompile. I have minifyMode='file' set, so this eventually calls _compileFiles() but local var fileList is empty string, so the $directoryClean() deletes everything from the output directory (CfStatic.cfc @ 762)

Notes:

• the output dir had been correctly populated by the processing of the init() call.
• turning checkForUpdates off stops the output dir being deleted
• I have only checked this will minifyMode='file'

Some dependencies should only be needed if they are already included. For example, jqGrid comes bundled with language files.
/languageFiles
./en.js
./ fr.js

One of those language files must be included before the main jqGrid.js. If jqGrid.js had a dependency on all of them, they'd all get included, so instead, one might add a conditional dependency in the language files such that jqGrid.js will always be included after any of the language files.

Can't seem to get scripts in absolute paths working, we're trying to deploy this on a server where commonly used scripts are stored in a separate directory than the website scripts. For instance:

Global script: /globals/scripts/jquery.js
Website: /templates/websitename/js/

Something like @Depends /var/www/webroot/globals/scripts/jquery.js

Anything like that possible or in the works?

Hi,

Just a thought, but I use mappings a lot and mapping to "org" could cause problems with other frameworks that use "org" as the namespace (FW/1 does off the top of my head). It would be useful if cfstatic used a namespace/package of cfstatic so that you could set up a mapping of "cfstatic" instead of "org".

Thanks :)