Search code examples
node.jswatchdust.jsclient-side-templating

merge javascript files in directory with node uglify + watch?

Goal:

I am trying to build an effortless workflow for client side templating development.

Doc Root:

/views/uncompiled/
/static/js/compiled/

We start in /views/uncompiled/

This is where I can build stuff out, like /views/uncompiled/index.html for example.

Im building dust.js templates, so I am using dusterjs too listen for changes in my /views/uncompiled/ directory, and automatically render compiled *.js counterparts in my /static/js/compiled/ directory.

So /views/uncompiled/index.html renders out /static/js/compiled/index.js anytime a change is saved.

Problem:

My layout.html is growing bigger. I need to include a new *.js script everytime I add another template:

<head>
    <script src='/static/js/compiled/index.js'></script>
    <script src='/static/js/compiled/header.js'></script>
    <script src='/static/js/compiled/footer.js'></script>
    <script src='/static/js/compiled/baconstrips.js'></script>
    ...
</head>

Solution:

Use another watch on the /static/js/compiled/ folder too automatically concat *.js into a single app.js that will always be included in my <head> anytime the contents of that folder changes:

<head>
    <script src='/static/js/app.js'></script>
</head>

Question:

I would like to use a concatonation tool like Uglify.js that also does compression.

  • Are there any node packages that automate the solution above?
  • Is there a native function of Uglify.js that already does this?
Solution

  • Use grunt.js. It has the ability to watch/concentate/minify your files through various contributed modules. Takes a little getting used to (I still am myself) but you will end up with a custom build process that works the way that you want it to work, which is priceless.