Managing dependencies of web components; JS, CSS/SASS and template files

Question

I'm looking to layout the structure of our new web components and am currently not sure I've found a tool that'll do all of what we ideally want, or comes very close, but it seems like it'd be a fairly common thing to want to do nowadays.

We have a web application that is running Java server-side, while client side we use JavaScript heavily and SASS, amongst other things. We are looking to re-sturcture some of our codebase and component-ize certain aspects of our dynamic page content.

For example, we would like to have a standard table component that can be developed completely independently of the full web app. I see the table component having the following 3 core files:

• table.js
• table.scss (our SASS file that compiles into a CSS file)
• table.tmpl (our template file that is ultimately compiled into a JS function, e.g. using something Handlebars as a templating engine)

And then to help development:

• table-test.html (A test page with some dummy data)
• table-qunit.js (Qunit tests)

All of these files would then hopefully be compiled into the following:

• components.js - table.js and table.tmpl compiled and minified, and then pulled into some larger JS file with all other components
• components.css - table.scss compiled and compressed, and merged with all other component CSS

Tools I've looked at:

• requireJS - seems to be very much targeted at JS dependency management with some thought for resource files but can't find anything about its use and CSS pre-processors like SASS. I do like the idea of AMD JS dependency management a lot however.
• Grunt - A node package that does some of what we want
• Sprockets - Ruby implementation of something similar to what we want
• Javascript Maven plugin - Closest in terms of languages / libraries (we already use Java and Maven) but again, seems to only consider JavaScript dependency management and not CSS, or at least SASS resource files.

Does anyone have any better suggestions than the ones above? Anything that comes a little closer to what we are looking for? Ideally something that doesn't require Node.js or Ruby would be preferable...

Answer 1

This really sounds like a perfect fit for Component by TJ Holowaychuk.