Darryl Lyons’ Blog

AJAX, ColdFusion and Web technology…

Entries Comments



CFjsmin

CFjsmin (beta) is a ColdFusion component that compresses JavaScript files or strings too a fraction of their original size (sometimes more than 50%). It achieves this by removing all non-essential whitespace and comments.

CFjsmin now has two different input/output modes -- string or file. This means you can do the following combinations:

  • String (source) to String (destination)
  • File to File
  • String to File
  • File to String

The component is also useful for packaging multiple JavaScript files into one compressed script file. This can lead to further improvements in speed. Internet Explorer only downloads two assets at a time when loading a page, so the less JavaScript files you have got, the quicker the site will load (we have over 200 individual files in our AJAX application at work, so it really helps us).

I am using a Java class called jsmin, by John Reilly, to actually do the grunt work. I modified the source a little so that it would accept a Reader class as input rather than a Stream, thus enabling the ability to compress strings or files. Because CFFILE is not being used to achieve this, you will find it is pretty quick even when dealing with lots of files.

I am providing the component as a "beta" release, so if you find any issues or have suggestions for improvements, please let me know.

I hope this helps you!

Download

CFjsmin v2.0.0

Usage

PLAIN TEXT
CFM:
  1.  
  2. <cfscript>
  3.         oJSMin = createObject("component","jsmin").init();
  4.  
  5.         // Usage 1: File to file
  6.  
  7.         // Set the source to be a file
  8.         oJSMin.setSource("file");
  9.        
  10.         // Set the destination to be a file, passing filename as second parameter
  11.         // NOTE: Destination file MUST be different! If it is the same as the
  12.         // source filename, then the source file will be overwritten.
  13.         oJSMin.setDestination("file", "compressedFile.js");
  14.                
  15.         // Compress the source string
  16.         oJSMin.compress("sourceFile.js");
  17.        
  18.         // Close the destination stream
  19.         oJSMin.closeDestination();
  20.  
  21.  
  22.         // Usage 2: String to string
  23.        
  24.         // Set the source to be a string
  25.         oJSMin.setSource("string");
  26.        
  27.         // Set the destination to be a string
  28.         oJSMin.setDestination("string");
  29.  
  30.         // Compress the source string
  31.         oJSMin.compress(sourceString);
  32.        
  33.         // Call getString() to get the compressed string
  34.         compressedString = oJSMin.getString();
  35.        
  36.         // Close the destination stream
  37.         oJSMin.closeDestination();
  38.  
  39.        
  40.         // Usage 3: String to file
  41.        
  42.         // Set the source to be a string
  43.         oJSMin.setSource("string");
  44.        
  45.         // Set the destination to be a file, passing filename as second parameter
  46.         oJSMin.setDestination("file", "compressedFile.js");
  47.                
  48.         // Compress the source string
  49.         oJSMin.compress(sourceString);
  50.        
  51.         // Close the destination stream
  52.         oJSMin.closeDestination();
  53.  
  54.  
  55.         // Usage 4: File to string
  56.  
  57.         // Set the source to be a file
  58.         oJSMin.setSource("file");
  59.         oJSMin.setDestination("string");
  60.        
  61.         // Compress the source file
  62.         oJSMin.compress("sourceFile.js");
  63.        
  64.         // Call getString() to get the compressed string
  65.         compressedString = oJSMin.getString();
  66.        
  67.         // Close the destination stream
  68.         oJSMin.closeDestination();
  69. </cfscript>
  70.  

Advanced Usage

You can also provide multiple sources, either multiple strings, files or a mixture of both.

PLAIN TEXT
CFM:
  1.  
  2. <cfscript>
  3.         oJSMin = createObject("component","jsmin").init();
  4.  
  5.         // Multiple source strings
  6.  
  7.         // Set the destination to be a file, passing filename as second parameter
  8.         oJSMin.setDestination("string");
  9.        
  10.         // Compress a string to the destination string
  11.         oJSMin.setSource("string");
  12.         oJSMin.compress(sourceString);
  13.         oJSMin.compress(sourceString2);
  14.  
  15.         compressedString = oJSMin.getString();
  16.  
  17.         // Close the destination stream
  18.         oJSMin.closeDestination();
  19.  
  20.  
  21.         // Multiple sources (files and strings)
  22.  
  23.         // Set the destination to be a file, passing filename as second parameter
  24.         oJSMin.setDestination("file", "compressedFile.js");
  25.        
  26.         // Compress a string to the destination file
  27.         oJSMin.setSource("string");
  28.         oJSMin.compress(sourceString);
  29.  
  30.         // Compress a file to the destination file
  31.         oJSMin.setSource("file");
  32.         oJSMin.compress("sourceFile.js");
  33.        
  34.         // Close the destination stream
  35.         oJSMin.closeDestination();
  36.  
  37. </cfscript>
  38.  

Example output

PLAIN TEXT
JavaScript:
  1.  
  2. // Before
  3. function foo()
  4. {
  5.  
  6.         // Some comments
  7.         var a = 2;
  8.        
  9.         // Some more comments
  10. }
  11.  
  12. // After
  13. function foo()
  14. {var a=2;}
  15.  

Write a comment