Tuesday, August 4, 2015

Hey, you got your Gulp in my Cakefile!

You know the problem. Cake has a lovely command line interface, but no plugins. Gulp is a swiss army knife / bucket of lego's, but you don't get command line parameters.

It sounds like they are made for each other. How can we integrate them?

To start, we can expose our gulpfile by appending this line:

module.exports = gulp;

Then we can access it from our cakefile:

gulp = require('./gulpfile')
...
task 'serve', 'open build/web in browser', ->
  gulp.start('serve')

task 'test', 'open web/ in browser with live reload', ->
  gulp.start('test')

That doesn't really get us much, but we can at least access our 'legacy' script.
It turns out that gulp doesn't need to live in a gulpfile. It can thrive right in our Cakefile:

gulp = require('gulp')
webserver = require('gulp-webserver')

option '-e', '--environment [ENVIRONMENT_NAME]', 'set the environment to open in browser'
task 'serve', 'open in browser', (options) ->
  env = options.environment ? 'rel'

  if env is 'rel'
    files = './build/web'
    liveReload = false
  else
    files = './web'
    liveReload = true

  gulp.src(files).pipe webserver(livereload: liveReload, open:true)


Now I can preview my web page. To view the release version:

$ cake -e rel serve

Or to view the development version:

$ cake serve