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.