Replacing Brunch with Gulp in Phoenix

dev.exs

use Mix.Config

# For development, we disable any cache and enable
# debugging and code reloading.
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with brunch.io to recompile .js and .css sources.
config :anycasts, Anycasts.Endpoint,
  ...
  watchers: [node: ["node_modules/gulp/bin/gulp.js", "watch"]]
  
...

Gulpfile.js

// Contains support for: SASS/SCSS, concatenation, and minification for JS and CSS

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var compress = require('gulp-yuicompressor');




var appCssPaths = [
  'web/static/css/**/*.css*',
  'web/static/css/**/*.scss*',
];

var vendorCssPaths = [
  'web/static/vendor/**/*.css*',
];

var jsBeforePaths = [
];

var jsAfterPaths = [
  'deps/phoenix/priv/static/phoenix.js',
  'deps/phoenix_html/priv/static/phoenix_html.js',
  'web/static/js/**/*.js*',
  'web/static/vendor/**/*.js*',
];

var otherAssetPaths = [
  'web/static/assets/**/*',
];







function reportChange(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}









//==================TASKS=====================

gulp.task('css-vendor', function() {
  return gulp
    .src(vendorCssPaths)
    .pipe(concat('app-vendor.css'))
    .pipe(compress({
      type: 'css'
    }))
    .pipe(gulp.dest('priv/static/css'));
});

gulp.task('css-app', function() {
  return gulp
    .src(appCssPaths)
    .pipe(concat('app.scss'))
    .pipe(sass())
    .pipe(compress({
      type: 'css'
    }))
    .pipe(gulp.dest('priv/static/css'));
});

gulp.task('js-before', function() {
  return gulp
    .src(jsBeforePaths)
    .pipe(concat('app-before.js'))
    .pipe(compress({
      type: 'js'
    }))
    .pipe(gulp.dest('priv/static/js'));
});

gulp.task('js-after', function() {
  return gulp
    .src(jsAfterPaths)
    .pipe(concat('app-after.js'))
    .pipe(compress({
      type: 'js'
    }))
    .pipe(gulp.dest('priv/static/js'));
});

gulp.task('assets', function() {
  return gulp
    .src(otherAssetPaths)
    .pipe(gulp.dest('priv/static'));
});

gulp.task('default', [
  'assets',
  'css-vendor',
  'css-app',
  'js-before',
  'js-after',
]);








//==================WATCHERS=====================

gulp.task('watch', function() {

  // CSS / SASS
  gulp.watch(vendorCssPaths, ['css-vendor']).on('change', reportChange);
  gulp.watch(appCssPaths, ['css-app']).on('change', reportChange);



  // JS
  gulp.watch(jsBeforePaths, ['js-before']).on('change', reportChange);
  gulp.watch(jsAfterPaths, ['js-after']).on('change', reportChange);



  // Other assets
  gulp.watch([
    'web/static/assets/**/*'
  ], ['assets']).on('change', reportChange);

});

@vyachkonovalov can you explain more about where you're using this wrapper? I'm still having trouble with getting Gulp to exit properly even while listening for stdin to close in the watcher task.