publish/js/<sha>.js contains plugins.js twice #73

Closed
david33409 opened this Issue May 31, 2012 · 8 comments

Projects

None yet

2 participants

@david33409

It is my understanding that when building the project via the "ant build" tool that the JS files referenced in the HTML file will be minified and combined into a single file using the hash as the filename in the order they are referenced in the HTML file. I've noticed that the combined file contains a copy of the plugin.js file (min.'s should be first), followed by the main.js file and then yet another copy of the plugin.js file again. After a little research I noticed that the file scripts-concat.min.js has the same content as the .js file. There appears to be something wrong with the -js.scripts.concat step in the build.xml. Maybe I'm doing something wrong.....It has happened :)

Thank you in advance for your time and consideration.

@david33409

I almost forgot. Before I get slammed for asking a silly question, I just want everyone to know I just started using HTML5Boilerplate today so please only respond with kind words. Thank you.

@roblarsen
Member

Can you paste the script block?

@david33409

How can I paste the script block? Every time I put it in the comment it disappears. The target name in the build.xml file is "-js.main.concat" I believe that is where the problem may be found.

Thank you for your time.

@david33409

OK I figured it out

<pre>
  <target name="-js.main.concat" depends="-js.all.minify" description="(PRIVATE) Concatenates the JS files in dir.js">
      <filelist id="file.root" dir="${dir.source}" files="${file.root.page}"/>
      <echo message="Concatenating Main JS scripts based on ${file.root.page}..."/>
      <apply executable="java" parallel="false" outputproperty="scripts.ordered">
          <arg value="-cp"/>
          <arg value="./${dir.build.tools}"/>
          <arg value="ScriptsToConcat"/>
          <first>
              <filelist refid="file.root"/>
          </first>
      </apply>
      <filelist id="scripts.toconcat" dir="./${dir.intermediate}/" files="${scripts.ordered}">
          <file name="${dir.js}/plugins.js"/>
      </filelist>
      <concat destfile="./${dir.intermediate}/${dir.js}/scripts-concat.min.js" overwrite="no">
          <filelist refid="scripts.toconcat"/>
      </concat>
  </target>
</pre>

It was my understanding that the build tool would concat the JS files into a single JS file in the order in which they are referenced in the HTML file. I would expect to see main.js at the top and plugin.js just below it. Please correct me if I am mistaken.

@roblarsen
Member

I know what the build script looks like :) What I need to see is the script block from your html file. The default one would be pasted into this box like this

```html
 <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <!-- end scripts -->```
@david33409

You have ESP :) The script block you have is exactly what I have. I realize that sequence is different from what I documented earlier. I would expect the resulting [sha].js file contain plugins.js first and then main.js. The problem is that I have the plugins.js file repeated twice in the the [sha].js file that is created. Below is my script block and below that is the main.js, plugins.js and the resulting [sha].js

  <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <!-- end scripts -->

plugins.js

// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function f(){ log.history = log.history || []; log.history.push(arguments); if(this.console) { var args = arguments, newarr; try { args.callee = f.caller } catch(e) {}; newarr = [].slice.call(args); if (typeof console.log === 'object') log.apply.call(console.log, console, newarr); else console.log.apply(console, newarr);}};

// make it safe to use console.log always
(function(a){function b(){}for(var c="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),d;!!(d=c.pop());){a[d]=a[d]||b;}})
(function(){try{console.log();return window.console;}catch(a){return (window.console={});}}());


// place any jQuery/helper plugins in here, instead of separate, slower script files.


myLog('this is a test');
myLog("this is another test");

main.js

/* Author:

*/

var _author_name = 'David';
myLog('this it the log from main.js');

5b824b2.js [sha].js

window.log=function f(){log.history=log.history||[];log.history.push(arguments);if(this.console){var a=arguments;try{a.callee=f.caller}catch(d){}a=[].slice.call(a);typeof console.log==="object"?log.apply.call(console.log,console,a):console.log.apply(console,a)}};
(function(b){function a(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),c;c=d.pop();)b[c]=b[c]||a})(function(){try{return console.log(),window.console}catch(b){return window.console={}}}());myLog("this is a test");myLog("this is another test");
var _author_name="David";myLog("this it the log from main.js");
window.log=function f(){log.history=log.history||[];log.history.push(arguments);if(this.console){var a=arguments;try{a.callee=f.caller}catch(d){}a=[].slice.call(a);typeof console.log==="object"?log.apply.call(console.log,console,a):console.log.apply(console,a)}};
(function(b){function a(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),c;c=d.pop();)b[c]=b[c]||a})(function(){try{return console.log(),window.console}catch(b){return window.console={}}}());myLog("this is a test");myLog("this is another test");

You'll notice that window.log is defined twice (as is the entire plugins.js file) in the resulting JS file.

Hope that helps.

@roblarsen roblarsen closed this in 6bb2731 Jun 5, 2012
@roblarsen
Member

Thanks for the bug report and the investigation. you pinpointed the issue. Thanks again!

@david33409

You are very welcome. Glad I could help. I was a little nervous that I didn't know what I was doing. :)

@bholtsclaw bholtsclaw added a commit to bholtsclaw/ant-build-script that referenced this issue Jun 9, 2012
@bholtsclaw bholtsclaw Merge remote-tracking branch 'h5bp/master'
* h5bp/master: (41 commits)
  Fixes #73. Surprised we didn't see this as an issue before. All better now.
  Fixed up -clean dependency. There is no longer any clean dependency :) Fixes #69. -clean now must be run manually. This needs documentation for the cases where people have been expecting clean every time.
  Update SASS project properties as per comments
  Added support for SASS (*.scss) files
  Updating jsdoc3 to latest version
  add jsdoc3 to tools folder
  add optional jsdoc3 task
  The single most important ant build script commit ever. a new task, ant hawterize. run it when you kick off a project and the selection color will be returned to its natural, beautiful, hot pink state.
  Add jshint / jslint configuration to file.default.exclude.
  Per discussion in the issue tracked spurred on by the decision at the parent project, removed appcache generation. fixes #59
  Don't copy empty directories to publish dir.
  Using woeye fork of less.js rhino compiler
  Corrected rel attribute in HTML for CSS when using LESS
  Tidied Less Script Removal Regex
  Moved config to project.properties and used comments to define less script removal.
  libs > vendor > libs (going around in circles.) I think this sorts it finally.
  Added option to compile LESS CSS
  one extra mention of "libs"
  Update config/default.properties
  Typo in comment with advice for old js-folder-structure in H5BP
  ...
a6e4ac2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment