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
Written by pmaoui
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Coffee
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#