How can I concatenate javascript files and replace the link in my HTML?

Question

As part of my build / CI process in TeamCity, I would like to specify the set of JavaScript files mentioned in my HTML and merge them into one.

In other words, this is what I would like to accomplish.

Before:

<script src="1.js" /> <script src="2.js" /> 

After

 <script src="combined.js" /> 

I am looking for a command line tool to combine 1.js and 2.js in integ.js. Then, a command line tool (or perhaps the same tool) to replace the links in the HTML file with this new file. Please tell me how I could do this.

What I have tried so far:

I watched grunt-usemin , which looks good, but requires the build server to run npm install for each build in order to get the dependencies, then run it. This takes too much time and is not a good solution, because we often install + deployment.

I know that I could add my node_modules folder to git, but this is also undesirable. It would be nice if grunt could run these modules installed all over the world, but this is not a rough way (if I am not mistaken, wants to grunt everything to be installed locally).

Someone also suggested running grunt on developer machines. Again, this is undesirable, since we have temporary VMs, and this will disrupt the flow of development.

It would be nice if I could use rununt-usemin without any problems!

Answer 1

I ended up creating my own: https://npmjs.org/package/hashcat

npm install -g hashcat

@Gustavohenke's recommendation was close, but h5bp ended up being too problematic for use on the build server. Ultimately, the creation of this module did not take much time and serves my needs. I will mark this as an answer until a better answer appears in the future.

Answer 2

You can simply use cat to merge files

 cat 1.js 2.js > combined.js 

To replace a piece of html you can use sed

 sed -i "s/<script src=\"1.js\">\n<script src=\"2.js\">/<script src=\"combined.js\">/g" *.html 

This is a pretty general solution, but to me it seems a little awkward. If you are creating this HTML in node, you might consider replacing it in javascript if the merged file exists.

 if (fs.existsSync('combined.js')) { res.end(html_contents.replace('<script src="1.js"/>\n<script src="2.js"/>','<script src="combined.js">')); } else { res.end(html_contents); } 

for best performance you can of course use the asynchronous version of fs.exists