All web applications has CSS and JS files. But, now a days most of the developers wants to include only minified JS and CSS files. Because, normal JS and CSS files having unnecessary characters in source codes. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters. These are very important only for code readability, but not needed for execution process. These unnecessary characters increase file size and it will be affect performance too. For this reason, the minification (also minimisation or minimization) is very important.
We have lot of JS and CSS minification online convertor and have lot of JAVA libraries available in internet. But, best one is, YUI Library ( Yahoo userInterface Library ). Because, it is very lightweight core library and also it is a free open source Library.
The YUI - Yahoo userInterface Library Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools.The YUI Compressor is also able to compress CSS files by using a port of Isaac Schlueter's regular-expression-based CSS minifier.
Prerequisites
- YUI Compressor requires 1.5 and above Java version.
- Version of YUI compressor library 2.4.8
- Download 2.4.8 version from this link ( https://github.com/yui/yuicompressor/releases )
Application.cfc
In this file, First need to include YUI jar file. In the below sample code, I have paste my downloaded YUI jar file inside of the lib folder.
<cfcomponent>
<cfset this.name = "yuicompress3">
<cfset THIS.javaSettings = {
LoadPaths = ["./lib"],
loadColdFusionClassPath = true,
reloadOnChange = true,
watchInterval = 10
}>
<cffunction name="onRequestStart">
<cfset application.wrapperObj = createObject("component","cfc.YUICompressor")>
<cfset application.wrapperObj.jsCompressor()>
<cfset application.wrapperObj.cssCompressor()>
</cffunction>
</cfcomponent>So, using this.settings I have included my jar file into my application. And As usaual, I have created an object for 2 CFC files. Inside of those files, I wrote a code for minified process.
YUICompressor.cfc
In this file, I wrote two functions such as jsCompressor(), cssCompressor(). In the cssCompressor() function, I wrote CSS file minification process code and in the another function wrote a JS file minification process code.
<cfcomponent>
<cffunction name="jsCompressor" access="public" output="false" returntype="void">
<cfset stReturn = structNew()>
<cfset oErrRep = createObject("cfc.ErrorReporter")>
<cfset jErrRep = createDynamicProxy(oErrRep, ["org.mozilla.javascript.ErrorReporter"])>
<cfset listOfJs = directoryList(expandPath("./assets/js"))>
<cfloop array="#listOfJs#" index="name">
<cffile action="read" variable="inputString" file="#name#">
<cfset joInput = createObject("java","java.io.StringReader").init(inputString)>
<cfset joOutput = createObject('java','java.io.StringWriter').init() />
<cfset compr = createobject("java","com.yahoo.platform.yui.compressor.JavaScriptCompressor").init(joInput,jErrRep)>
<cfset compr.compress(joOutput,javaCast('int',-1),<br> javaCast('boolean',false), <br> javaCast('boolean',false),<br> javaCast('boolean',false),<br> javaCast('boolean',false))>
<cfset stReturn.results = joOutput.toString() />
<cfset joOutput.close() />
<cfset joInput.close() />
<cfset stReturn.uncompressed = len(inputString) />
<cfset stReturn.compressed = len(stReturn.results) />
<cfset stReturn.compression = (1 - (stReturn.compressed / stReturn.uncompressed)) * 100 />
<cfset extension = listLast(name,'.') />
<cfset filename = listLast(replaceNoCase(name,'.js','.min.js'),'\') />
<cfset folderName = "minifiedAssets" />
<cfif NOT directoryExists(expandPath('./#folderName#'))>
<cfset directoryCreate(expandPath('./#folderName#')) />
</cfif>
<cfif NOT directoryExists(expandPath('./#folderName#/#extension#'))>
<cfset directoryCreate(expandPath('./#folderName#/#extension#')) />
</cfif>
<cffile action="write" file="#expandPath('./#folderName#/#extension#/#filename#')#" output="#stReturn.results#">
</cfloop>
</cffunction>
<cffunction name="cssCompressor" access="public" output="false" returntype="void">
<cfset stReturn = structNew()>
<cfset listOfCss = directoryList(expandPath("./assets/css"))>
<cfloop array="#listOfCss#" index="name">
<cffile action="read" variable="inputString" file="#name#">
<cfset joInput = createObject("java","java.io.StringReader").init(inputString)>
<cfset joOutput = createObject('java','java.io.StringWriter').init() />
<cfset compr = createobject("java","com.yahoo.platform.yui.compressor.CssCompressor").init(joInput)>
<cfset compr.compress(joOutput,javaCast('int',-1))>
<cfset stReturn.results = joOutput.toString() />
<cfset joOutput.close() />
<cfset joInput.close() />
<cfset stReturn.uncompressed = len(inputString) />
<cfset stReturn.compressed = len(stReturn.results) />
<cfset stReturn.compression = (1 - (stReturn.compressed / stReturn.uncompressed)) * 100 />
<cfset extension = listLast(name,'.') />
<cfset filename = listLast(replaceNoCase(name,'.css','.min.css'),'\') />
<cfset folderName = "minifiedAssets" />
<cfif NOT directoryExists(expandPath('./#folderName#'))>
<cfset directoryCreate(expandPath('./#folderName#')) />
</cfif>
<cfif NOT directoryExists(expandPath('./#folderName#/#extension#'))>
<cfset directoryCreate(expandPath('./#folderName#/#extension#')) />
</cfif>
<cffile action="write" file="#expandPath('./#folderName#/#extension#/#filename#')#" output="#stReturn.results#">
</cfloop>
</cffunction>
</cfcomponent>In side of this function, I created an object for ErrorReporter.cfc file. This is a required core file. So, Please don't forgot to include this CFC file on the particular directory. I just read all the JS and CSS files from /assets/js & /assets/css directory and then created some wonderful Java objects like StringBuilder,StringReader,StringWriter. These all are used for minified the CSS & JS files.
For compressing JS files need to call the JavaScriptCompressor, com.yahoo.platform.yui.compressor.JavaScriptCompressor For compressing CSS files need to call the CssCompressor com.yahoo.platform.yui.compressor.CssCompressor
<cfcomponent>
<cffunction name="warning" returntype="void">
<cfargument name="message" type="java.lang.String" required="false">
<cfargument name="sourceName" type="java.lang.String" required="false">
<cfargument name="line" type="int" required="false">
<cfargument name="lineSource" type="java.lang.String" required="false">
<cfargument name="lineOffset" type="int" required="false">
</cffunction>
<cffunction name="error" returntype="void">
<cfargument name="message" type="java.lang.String" required="false">
<cfargument name="sourceName" type="java.lang.String" required="false">
<cfargument name="line" type="int" required="false">
<cfargument name="lineSource" type="java.lang.String" required="false">
<cfargument name="lineOffset" type="int" required="false">
</cffunction>
<cffunction name="runtimeError" returntype="org.mozilla.javascript.EvaluatorException">
<cfargument name="message" type="java.lang.String" required="false">
<cfargument name="sourceName" type="java.lang.String" required="false">
<cfargument name="line" type="int" required="false">
<cfargument name="lineSource" type="java.lang.String" required="false">
<cfargument name="lineOffset" type="int" required="false">
<cfset local.exc = createObject(
"java",
"org.mozilla.javascript.EvaluatorException"
).init(arguments.message)>
<cfreturn local.exc>
</cffunction>
</cfcomponent>