Eu queria obter 3 coisas com Grunt:
- usar MENOS para o estilo
- usar CoffeeScript em vez de JS
- usar essas ferramentas sem se preocupar em compilar a cada edição (assistir e compilar e, se necessário, recarregar o servidor de nó)
Eu uso aqueles para o módulo grunt:
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'
Gosto de ter uma pasta chamada ativos com:
assets
|- coffee
| - *.coffee files
|- less
| - *.less files
|- graphics
| - PSD files realted to your project
e um outro aplicativo de pasta com:
app
| - js
| - *.js compiled files
| - css
| - *.css compiled files
| - img
| - *.(png|jpg whatever)
Para iniciar seu aplicativo:
grunt forever:start
Em seguida, para iniciar uma sessão de desenvolvimento:
grunt watch