gulp + jade + handlebars + sass + coffee

Salve  galera,

Nesses últimos dias venho explorando tecnologias ligadas a nodejs, e com isso me deparei com um "novo" mundo repleto de novas possibilidades, novas ideias, novos paradigmas e novas ferramentes!

Com isso, estava eu seguindo um tutorial de integração entre jade, handlebars, coffee e backbone. Mas como o tutorial além de antigo destinava-se para desenvolvedores com mais conhecimento sobre essas ferramentas, não consegui prosseguir, e para conseguir o que pretendia precisei "garimpar" e montar minha ideia a partir de outros lugares obscuros da internet (mentira, googlei mesmo! ;) )

Para começo eu precisava de uma ferramente de buil que executasse os seguintes passos:

1. Compilação do templete jade para html (para usar no handlebars)
2. Compilação do template handlebars para js (para otimização)
3. Compilação do sass para css
4. Compilação do coffee para js
5. Deploy do html na pasta de destino

Além do processo de build, eu ainda precisava de um "auto-build", por questões óbivias de produtividade, como em oferecido em ferramentes como grails, rails ou django. Foi então que lembrei que nas minhas leituras dos últimos dias achei um blog bem interessante chamado blog.lambda3.com.br, e em um de seus artigos li uma lista de ferramentas usadas com com nodejs, entre elas uma ferramente de build chamada gulp gulpjs.com e logo fui atrás desse cara para ver se poderia fazer minha configuração de buid. E eis que construi 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 = 'src/styles/**/*.scss'
sources.coffee = 'src/scripts/**/*.coffee'
sources.jade = 'src/jade/**/*.jade'
sources.html = 'src/html/**/*.html'
sources.handlebars = 'src/compiled-templates/**/*.html'
 
destinations.css = 'dist/css'
destinations.js = 'dist/js'
destinations.templates = 'src/compiled-templates'
destinations.base = 'dist/'
destinations.handlebars = 'dist/js'


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 'copy:html', ->
 gulp.src(sources.html)
 .pipe(gulp.dest(destinations.base))

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


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 'copy:handlebars'

gulp.task 'watch:html', ->
 gulp.watch sources.html, watcher 'copy:html'

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

Coloque esse conteúdo em um arquivo .coffee e execute chamando gulp watch para o auto deploy ou apenas gulp para executar o build completo, que no caso está definido na task default. Lembrando que a instalação dos componetes declarados nos "require" devem ser feitos via npm. Ex.:

npm install gulp --save-dev

Certamente isso deve ajudar quem está começando, assim como eu.

Até a próxima!