[フレーム]
Last Updated: February 25, 2016
·
2.448K
· 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

AltStyle によって変換されたページ (->オリジナル) /