Http Server: node.js 0.8.16
source files: mix of js and coffee
AMD loader: curl / require
Markup: jade
CSS: styl
I'm building a prototype app using the above setup. It's all working fine, but I'm working on getting an AMD loader integrated with the app. The assets folder looks like this:
|____assets
| |____css
| | |____style.css
| | |____style.styl
| |____img
| |____js
| | |____bacon.js
| | |____curl.js
| | |____foo.coffee
| | |____index.coffee
OK so I want to get index.coffee
and foo.coffee
to be compiled as js and served when the browser requests /js/foo.js
etc. This would work fine if I used connect-assets and put != js('foo')
in my jade markup. But that != js(
is kicking off connect-assets compilation, which is (I think) on the fly compiling the coffee file to js.
But if I use curl
with a path like "foo" : "/js/foo.js"
it won't work because connect-assets' js() method isn't kicking off.
Is there a middleware for node that will handle requests for coffee files as js files? I've looked a bit and connect-assets was the closest I could find.
I'd like to avoid having to set up a 'watcher' on my coffee files. Since I'm using some js files and some coffee-as-js files, I don't want to have to keep track of where the 'real' js files are and where the 'on-the-fly' js files are.
Update 5/24: I ditched all the middleware fiddle-faddle and went with grunt
with a watcher that compiles stuff when it changes. Works great.
Yep, a duplicate, mostly. I'll answer it anyway in case this helps someone else down the road.
https://github.com/wdavidw/node-connect-coffee-script
var app = express();
srcFolder = path.join(__dirname, 'assets', 'src', 'coffee');
publicFolder = path.join(__dirname, 'assets');
console.log("public folder: " + publicFolder);
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
...
app.use(require('connect-coffee-script')({
src: srcFolder, dest: path.join( publicFolder, 'js')
}));
app.use(stylus.middleware ({
debug: true,
force: true,
src: path.join(__dirname, 'assets', 'src', 'styl' ),
dest: path.join(__dirname, 'assets', 'css')})
);
app.use(express.static(publicFolder));
});
Then on the layout.jade side:
script
curl = {
baseUrl: "/js",
paths: {
"jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js",
"foo" : "foo.js",
"index" : "index.js",
"bacon" : "bacon.js"
}
};
script(src='/js/curl.js')
script
//debugger;
curl(['js!jquery', 'js!bacon', 'js!foo!order', 'js!index!order'])
.then(function(){
console.log("scripts loaded");
},
function(){
alert("a module failed to load");
});