title: Greasemonkey/Javascript preprocessor and build system
body: <p>I'm writing a moderately complex script for Greasemonkey.  Part of it is generating a big blob of HTML and CSS and cramming it into the page.  I'd like to keep these HTML and CSS blobs as separate files in my source tree, since:</p>
  
  <ul>
  <li>Javascript has no multiline strings, so either I get a huge line, or lots of concatenation, or line continuations.  Ugly.</li>
  <li>The files evolve at different rates, so having them as separate files in Git is notionally better</li>
  <li>My text editor can set the mode properly when it's not one document embedded in another</li>
  </ul>
  
  <p>Among many other things.</p>
  
  <p>Unfortunately, Greasemonkey scripts are only ever a single script, not a bundle, so I have to inline the HTML and CSS at some point.  I'm trying to find a good build system for this workflow.  Building for distribution would involve copying from the HTML and CSS into the user script.</p>
  
  <p>My first instinct was to use make the C preprocessor and <code>#include</code>, but this only works on lines, so doing something like:</p>
  
  <pre><code>var panel = document.createElement('div');
  panel.innerHTML = '#include "panel.html"';
  </code></pre>
  
  <p>Doesn't work.</p>
  
  <p>What I'm looking for is something exactly like <a href="http://js-preprocessor.com/" rel="nofollow">http://js-preprocessor.com/</a> , but that doesn't throw a "wrong number of arguments" error when I run it. :P</p>