Last Updated: February 25, 2016
·
2.377K
· pmaoui

Grunt configuration with Node.JS, Forever, Less CSS, CoffeeScript

I wanted to obtain 3 things with Grunt :

  • to use LESS for style
  • to use CoffeeScript instead of JS
  • to use those tools without caring about compiling at each edit (watch and compile and if necessary reload the node server)

I use those for grunt module :
assemble-less
grunt-contrib-watch
grunt-contrib-coffee
grunt-forever

Gruntfile.coffee :

module.exports = (grunt)->
  grunt.initConfig
    watch:
      devless:
        files: ['assets/less/*.less']
        tasks: ['less:development']
      devcoffee:
        files: ['assets/coffee/*.coffee','assets/coffee/*/*.coffee']
        tasks: ['coffee:optimal']
      watchNode:
        files: ['main.coffee']
        tasks: ['forever:restart']

    forever:
      options:
        command: 'coffee'
        index  : 'main.coffee'

    coffee:
      optimal:
        options:
          sourceMap:true
        files:
          'app/js/scripts.js': [
            'assets/coffee/app.coffee'
            'assets/coffee/filters.coffee'
            'assets/coffee/services.coffee'
            'assets/coffee/directives/*.coffee'
            'assets/coffee/controllers/*.coffee'
          ]

    less:
      development:
        options:
          paths: 'assets/less'
        files:
          'app/css/style.css':'assets/less/main.less'

      production:
        options:
          paths: 'assets/less'
          compress: true
        files:
          'app/style.css':'assets/less/style.less'

  grunt.loadNpmTasks 'assemble-less'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-forever'

I like having a folder called assets with :

assets
 |- coffee
      | - *.coffee files
 |- less
      | - *.less files
 |- graphics
      | - PSD files realted to your project 

and an other folder app with :

app
| - js
     | - *.js compiled files
| - css
     | - *.css compiled files
| - img
     | - *.(png|jpg whatever)

To launch your app :

grunt forever:start

Then to start a dev session :

grunt watch