How do I concatenate JavaScript files into one file?

Question

I want to create a compiled JavaScript file for my website. For development I would prefer to keep the JavaScript in separate files and just as part of my automated scripts concatenate the files into one and run the compressor over it.

My problem is that if I use the old DOS copy command it also puts in the EOF markers which the compressor complains about:

copy /A *.js compiled.js /Y

What are other people doing?

Answer 1

I recommend using Apache Ant and YUI Compressor.

http://ant.apache.org/

http://yui.github.com/yuicompressor/

Put something like this in the Ant build xml. It will create two files, application.js and application-min.js.

<target name="concatenate" description="Concatenate all js files">
    <concat destfile="build/application.js">
        <fileset dir="src/js" includes="*.js" />
    </concat>
</target>

<target name="compress" depends="concatenate" description="Compress application.js to application-min.js">
    <apply executable="java" parallel="false">
        <filelist dir="build" files="application.js" />
        <arg line="-jar" />
        <arg path="path/to/yuicompressor-2.4.2.jar" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.js" to="build/*-min.js" />
        <targetfile />
    </apply>
</target>

Answer 2

To copy without EOF use binary mode:

copy /B *.js compiled.js /Y

If the resulting file still has EOFs, that might have come from one of original files, it can be fixed by this variant:

copy /A *.js compiled.js /B /Y

/A removes trailing EOFs from original files if any and /B prevents appending EOF to the resulting file. If an EOF is not at the end, the source file will be truncated at it. The order of switches is important. If you write

copy /A *.js /B compiled.js /Y  

- EOFs in source files won't be removed but still resulting EOF won't be appended.

Try it yourself, thats where I get it. DOS commands are weird.

Answer 3

In asp.net AJAX, you can use the 'CompositeScript' tag. This will combile all your scripts into 1 big js file, saving bandwidth by reducing the number of http 304s and possibly http 401s.

Sample:

 <asp:ScriptManager ID="ScriptManager1" runat="server">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/Script1.js" />
                <asp:ScriptReference Path="~/Scripts/Script2.js" />
                <asp:ScriptReference Path="~/Scripts/Script3.js" />
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>

For more info, see here: http://msdn.microsoft.com/en-us/library/cc488552.aspx

Answer 4

This is a very old question, but I want to mention that there are also ways to concatenate javascript using javascript! with nodejs obviously... For example there are tools published as npm modules like this and there are also grunt and gulp plugins too.

I also want to mention a very, VERY, interesting technique that is being used in huge projects like jQuery and Modernizr. Both of this projects are entirely developed with requirejs modules and then they use the requirejs optimizer as a very smart concatenator. The interesting thing is that, as you can see, neither jQuery nor Modernizr needs on requirejs to work, and this happen because they erase the requirejs syntatic ritual in order to get rid of requirejs in their code. So they end up with a standalone library that was developed with requirejs modules!. Thanks to this they are able to perform cutsom builds of their libraries, among other advantages. Here is a blog post that explains all this more in detail.

Answer 5

Install the compressor uglifyjs on your machine:

sudo npm -g install uglify-js

Then the following command can be used to concatenate and compress all js files.

cat myAppDir/*.js | uglifyjs > build/application.js

Answer 6

We have created a mechanism consisting of the following parts:

• minfication (for js and css)
• aggregation in packages
• caching (http status 304 stuff)
• sending out original files for in development mode

It may be too much for your needs, but as to answer your question what others do, here is how it works:

1. A request comes in at, say, /css.aspx?package=core
2. We do a lookup of the packagename in a xml configuration file (which for instance declares that the package "core" contains the files /js/mootools.js and /js/swfobject.js)
3. We check if minification is enabled. For instance, in a development environment we don't want the minified js contents to be served out, but instead write the original files. For js this is done by document.writes of script includes, and for css we write import rules.
4. If minification is required (in production env) we do a check on the if-modified-since header from the request. If this client already has the minified contents, we send http header 304. If the client does require the contents, we check if we have minified contents in cache and serve that. Otherwise, we minify and send the result.

All this is broken up in separate services. There is a cache service injected in the jsminificationwriter service. This makes use of the original minificationservice that solely takes care of the minification rules.

What's nice in this approach is:

• It forces our development teams to think in js/css "packages" and therefore properly split up functionality and distribute them over the pages that require them.
• During development you are perfectly able to debug, getting proper files and line numbers.
• You can hook up any other minification service implementation such as YUI and so forth. JsMin was only our first take.
• It's a general approach that works for different content types.

Hope this helps. I can post some code fragments to illustrate it more if you like.

Answer 7

You can also do:

type *.js > compiled.js

Answer 8

I'll second yuicompressor, but I use /packer/

http://johannburkard.de/blog/programming/javascript/automate-javascript-compression-with-yui-compressor-and-packer.html

It's been really excellent for me.

Answer 9

I know this is a very old question, but for the sake of completeness I'll mention the option of going with Browserify. It allows you to build your project as different modules using NPM's require function to resolve dependencies, and then it resolves those dependencies and concatenates your entire project into an single file.

For example, say your project is called FooBar and you want to output a file called foobar.js. You'd create a main.js file as the entry point for the project, requiring all the modules that should be included.

main.js

require("./doFoo");
require("./doBar");

Then run:

browserify main.js -o foobar.js

Or, to do it automatically every time a source file changes you could also use Watchify.

watchify main.js -o foobar.js

Browserify will also resolve dependencies between modules. So for example, if doBar.js depends on doQux.js...

doBar.js

require("./doQux");
const doBar = ()=>{
    //Do some bar stuff.
}
exports.doBar = doBar;

Then Browserify will make sure to include doQux.js into foobar.js so that you won't have any broken dependencies.

Answer 10

You can also try wro4j (web resource optimizer for java), which can be used as a build tool (maven plugin), runtime solution (using filter) or command line tool. It allows you to easily keep resources organized and handle the merging for you using a dozen of compressors for resources of bot types: js and css.

Defining resources to merge is easy as:

<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/asset/*.css</css>
    <js>/asset/*.js</js>
  </group>
</groups>  

Disclaimer: I'm a commiter of this project.

Answer 11

This is how I resolved the very same task using glob:

const fs = require('fs');
const glob = require('glob');

const outputFile = './output/output.js';
const filesToConcat = './path/*.js';

// delete output file if exists (otherwise it will continue appending)
fs.unlink(outputFile, function(err) {
  console.log('output.js is removed');
});

// concat all js files into cam-benefits-ui.js
glob(filesToConcat, function(err, files) {
  files.forEach(file => {
    fs.readFile(file, 'utf8', function(err, data){
      fs.appendFileSync(outputFile, data);
    });
  });
});