Watch and compile coffeescript in multiple folders and vendor javascript files in specific order, also organize sass and html templates

Question

I have a directory structure like this:

+ src
 |
 | - modules
 | |
 | | - auth
 | | |
 | | | - auth.coffee
 | | | - auth.sass
 | | | - login.html
 | | | - logout.html
 | |
 | | - navigation
 | | |
 | | | - navigation.coffee
 | | | - navigation.sass
 | | | - navbar.html
 | | 
 | - scripts
 | |
 | | - vendor
 | | |
 | | | - underscore.js
 | | | - angular.js
 | |
 | | - app.coffee
 | | - router.coffee
 |
 | - styles
 | |
 | | - config.sass
 | | - style.sass

I want to:

1. Watch all .coffee, .sass and .html files and do steps 2 and 3 when a file has changed

2. Compile the .coffee and .sass files.

   For both i need to specify dependencies (or: a specific ordering).

   • Coffeescript
     • compile scripts/vendor/underscore.js
     • then scripts/vendor/angular.js
     • then scripts/*.js
     • then modules/**/*.js
   • SASS
     • compile styles/config.sass
     • then styles/style.sass
     • then modules/**/*.sass

3. Collect all .js, .css and .html files and organize them for the public folder.

This is the desired output

+ public
 |
 | - partials
 | |
 | | - auth
 | | |
 | | | - login.html
 | | | - logout.html
 | |
 | | - navigation
 | | |
 | | | - navbar.html
 | | 
 | - scripts
 | |
 | | - app.js
 |
 | - styles
 | |
 | | - app.css

I tried many tools, but couldn't get the desired result. For example Flour for the Coffeescript had problems with wildcards in compile methods.

I think the best thing would be a Cakefile that does everything for me. How can i accomplish this?

Answer 1

First, why compile underscore or angular? Just link to the minified version on a CDN. You might be able to get better performance by packing those together with your app js, I don't have a solid yes/no answer on this, you'll have to research.

I think you should be able to accomplish this with grunt. My config isn't exactly what you want but:

 # Project configuration.
 grunt.initConfig
 watch:
 coffee:
 files: ['app/assets/src/coffee/**/*.coffee', 'app/assets/src/coffee/*.coffee', 'test/*.coffee', '!**/screencaps/**', 'app/webserver.coffee']
 tasks: ['coffee:dev', 'replace', 'mochaTest']
 grunt.loadNpmTasks("grunt-contrib-coffee")
 grunt.loadNpmTasks('grunt-contrib-watch')

Etc. Grunt uses glob for file pattern matching. For what you want to do I'd set up a chain of watch commands:

1. Watch for a change in src/modules/*.coffee
2. Compile (and optionally uglify) all coffee to js, move to public/scripts.
3. Do the same for SASS files.

• Alp: you are completely right about not compiling js files. it should have been: compile coffescripts and concat them with all js files