text: Q:
  
  Coldfusion combining linked JavaScript files
  
  I have been tasked with combining all the external JavaScript files into one call. It seems a bit silly, but this is the task I have been given. 
  While I thought it would be easy and just use a plugin like https://github.com/zefer/Combine it appears that they are linking files in an odd way. 
  They are using cfset's to define where these files are. IS there anyway I can put these together in one call or use the plugin above. I've been trying to come up with solutions, but my brain is officially running on empty.
  <cfset Application.globalObj.addJsFile(jsfile="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js",location="footer",priority=1) />
  
  A:
  
  Ok, so first, this is not a silly request. You can load 5 JS files to load jQuery and 4 plugins or you can load all of that code in a single, compressed file. This will speed up your page loading and can reduce the amount of content coming to the browser from 25 - 70% related to JS library code. 
  We have a similar ColdFusion object that allows us to specify what JS file is required for a particular page to work correctly. The list of files is collected on the server and then rendered to the page either in the <head> or below the <body> (where a JS file is requested also affects page loading speed). 
  What they are asking you to do is collect their standard set of JS libraries (and the related CSS files) and create a build, which will produce a pair of JS and CSS files that can be loaded in one request instead of many.
  This is not something you should do with ColdFusion.
  By this, I mean, you won't create the compiled files on the fly in production, you'll create them ahead of time and deploy them to your server, where the application will reqeust them instead of the individual JS library files. 
  You need to use a build tool like Grunt or Gulp, which require Node. If you've never used Node before, it'll take you a day or two to get all of this up and running with a build. There are tons of examples online, but I'll give you an example of a build we have for a legacy app that still uses the Adobe Spry library.
  var gulp = require('gulp');
  var uglify = require('gulp-uglify');
  var concat = require('gulp-concat');
  var rename = require('gulp-rename');
  var cssmin = require('gulp-cssmin');
  var compileDest = 'dist/compiled';
  var jsSrc = [];
  var cssSrc = [];
  
  jsSrc.push('app/spry/1.6.1/widgets/SpryAccordion.js');
  jsSrc.push('app/spry/1.6.1/widgets/SpryHTMLPanel.js');
  jsSrc.push('app/spry/1.6.1/SpryData.js');
  jsSrc.push('app/spry/1.6.1/SpryHTMLDataSet.js');
  jsSrc.push('app/spry/1.6.1/SpryJSONDataSet.js');
  jsSrc.push('app/spry/1.6.1/SpryNestedXMLDataSet.js');
  jsSrc.push('app/spry/1.6.1/xpath.js');
  jsSrc.push('app/spry/1.6.1/SpryPagedView.js');
  cssSrc.push('app/spry/1.6.1/widgets/SpryAccordion.css');
  cssSrc.push('app/spry/1.6.1/widgets/SpryHTMLPanel.css');
  
  gulp.task('compileScripts',function(){
      //JS
      gulp.src(jsSrc)         
          .pipe(concat('equator-spry.1.6.1.js'))
          .pipe(uglify())
          .pipe(rename('equator-spry.1.6.1.min.js'))
          .pipe(gulp.dest(compileDest));
      //CSS
      gulp.src(cssSrc)
          .pipe(concat('equator-spry.1.6.1.css'))
          .pipe(cssmin())
          .pipe(rename('equator-spry.1.6.1.min.css'))
          .pipe(gulp.dest(compileDest));
  });
  
  Instead of 8 JS files, we load 1: equator-spry.1.6.1.min.js
  Instead of 2 CSS files, we load 1: equator-spry.1.6.1.min.css
  
  Your CF code would then just reference 
  <cfset Application.globalObj.addJsFile(jsfile="/js/equator-spry.1.6.1.js",location="footer",priority=1) />
  You would also need to update addJsFile() to ignore requests to the individual JS files to avoid refactoring existing code and to avoid a potential conflict in library versions when you eventually update your build as the underlying libraries get updated. 
  You would lose your ability to load from a public CDN, but you would gain a reduction in page loading speed by users retrieving the new compiled files for your site from browser cache.
  Edit
  
  This is a ten+ year old project and has over 100 pages and a custom cms system. Previous developers have tried and failed miserably. That was why I was trying to use a simpler solution and not bring a new tech into this stack that is already a complete mish mash. 
  
  You're introducing no new tech to the ColdFusion application itself. 
  What you are going to do is introduce a new process for producing JS and CSS files that will be used by the CF application. 
  In my case, there is a global layout file. I just added a line to load the new compiled JS and CSS files onto that layout. 
  <cfset rc.oResourceService.addHeadContent(type='js', src='/resource/compiled/spry/1.6.1/equator-spry.1.6.1.min.js')  />
  <cfset rc.oResourceService.addHeadContent(type='css', src='/resource/compiled/spry/1.6.1/equator-spry.1.6.1.min.css')  />
  Now they're available to every screen. 
  Then I would find the object that defines Application.globalObj, locate the function addJsFile() and update it to ignore a list of the existing individual JS file names.
  <!--- ResourceService, function addHeadContent() --->
  var ignoreList = [
      'jquery\.js'
      , 'SpryAccordion\.css'
      , 'SpryHTMLPanel\.css'
      , 'SpryAccordion\.js'
      , 'SpryHTMLPanel\.js'
      , 'SpryData\.js'
      , 'SpryHTMLDataSet\.js'
      , 'SpryJSONDataSet\.js'
      , 'SpryNestedXMLDataSet\.js'
      , 'xpath\.js'
      , 'SpryPagedView\.js'
  ];
  
  Now, anytime a file in that list is requested, it gets ignored and no <script> tags gets rendered for it. 
  <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/includes/SpryData.js') />
  <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/includes/xpath.js') />
  <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/includes/SpryPagedView.js') />
  <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/includes/SpryJSONDataSet.js') />
  <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/widgets/htmlpanel/SpryHTMLPanel.js') />
  This means that thousands (yes, THOUSANDS in my case) of CFM files do not have to be updated to remove the individual references to those now deleted files. 
  You can absolutely do this! 
  You're already ahead of the game since you're used those build tools before. You know what you need to produce and what you're trying to accomplish. You just need to figure out what small changes need to be made in your existing CF code to make it happen. I've outlined what I had to do and it seems very similar to what you're dealing with. 
  Don't take an improper approach that "just happens to work" and make it the new thing. Make the current tech thing the new thing.
  Now, when you need to implenent a NodeJS API on top of existing CF logic or have to integrate Angular JS apps on top of your legacy CF code, gimme a holler and we can talk about what we're doing with that too. :)
  
  