Grails + sass + jade + handlebars + coffe

Fala galera,

A pouco tempo comecei a usar outras tecnologias otimizadoras no processo de desenvolvimento junto do Grails. São elas:

- sass
- jade
- handlebars
- coffee

Para tal necessidade eu fui atrás de alguns plugins do grails, mas não fiquei satisfeito com alguns deles. Primeiro por que alguns encontram-se desatualizados e com pouca documentação, e ainda tem alguns bugs. Ora, se pararmos para pensar, essas ferramentas são complementares ao desenvolvimento, apenas voltadas para a produtividade, então não se deve perder muito tempo com complexidades na configuração do ambiente. Para resolver o problema eu acabei usando uma estrutura separada do grails para o controle, uma que eu postei aqui no blog a poucos dias.. usando o gulp para realizar a tarefa.

Então foi simples.. Eu criei a seguinte estrutura no projeto grails (dentro de assets):

Para esse projeto uso a versão do grails 2.3.4, e essa versão ainda não trabalha com o plugin assets por padrão.

Crieu meu gulpfile com o seguinte script:

gulp = require 'gulp'
sass = require 'gulp-sass'
jade = require 'gulp-jade'
coffee = require 'gulp-coffee'
handlebars = require 'gulp-handlebars'
concat = require 'gulp-concat'
declare = require 'gulp-declare'
wrap = require 'gulp-wrap'

errorHandler = (err) ->
 console.log err

sources = {}
destinations = {}

sources.sass = 'grails-app/assets/stylesheets/**/*.scss'
sources.coffee = 'grails-app/assets/coffeescripts/**/*.coffee'
sources.jade = 'grails-app/assets/jade/**/*.jade'
sources.handlebars = 'grails-app/assets/templates/**/*.html'
 
destinations.css = 'web-app/css'
destinations.js = 'web-app/js'
destinations.templates = 'grails-app/assets/templates'
destinations.handlebars = 'web-app/js/bi/templates'


watcher = (task) ->
  (evt) ->
   console.log 'run ' + evt.path
   gulp.start task
   
gulp.task 'compile:sass', ->
 gulp.src(sources.sass)
 .pipe(sass({sourceComments: 'normal'}).on('error', errorHandler))
 .pipe(gulp.dest(destinations.css))

gulp.task 'compile:coffee', ->
 gulp.src(sources.coffee)
 .pipe(coffee({bare: true, sourcemap: true}).on('error', errorHandler))
 .pipe(gulp.dest(destinations.js))

gulp.task 'compile:jade', ->
 gulp.src(sources.jade)
 .pipe(jade().on('error', errorHandler))
 .pipe(gulp.dest(destinations.templates))

gulp.task 'compile:handlebars', ->
 gulp.src(sources.handlebars)
 .pipe(handlebars())
 .pipe(wrap('Handlebars.template(<%= contents %>)'))
 .pipe(declare({
  namespace: 'View.templates',
  noRedeclare: true
 }))
 .pipe(concat('templates.js'))
 .pipe(gulp.dest(destinations.handlebars))


gulp.task 'default', ->
 gulp.start 'compile:sass', 'compile:coffee', 'compile:jade', 'compile:handlebars'


gulp.task 'watch:sass', ->
 gulp.watch sources.sass, watcher 'compile:sass'

gulp.task 'watch:coffee', ->
 gulp.watch sources.coffee, watcher 'compile:coffee'


gulp.task 'watch:jade', ->
 gulp.watch sources.jade, watcher 'compile:jade'

gulp.task 'watch:handlebars', ->
 gulp.watch sources.handlebars, watcher 'compile:handlebars'

gulp.task 'watch', ->
 gulp.start 'watch:sass', 'watch:coffee', 'watch:jade', 'watch:handlebars'
  
 

E logo depois (ou antes) de subir meu projeto grails é só executar:

gulp watch

E então ficar atentos com o console do gulp quanto a erros de complilação. E não se esqueça de instalar as dependências usadas no gulp via npm.

Espero que ajude! Abraço