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);

});

In the last part of the watcher, you can replace the input array with the variable that you have defined

I added a gulp watcher in config, but the watcher process is still there after I shut down phoenix. Any idea?

@jackalcooper
I'm using a wrapper to solve this issue

const spawn = require('child_process').spawn
let watcher = spawn('gulp', ['watch', '--color'], {stdio: 'inherit'})

process.stdin.on('end', () => {
  process.kill(watcher.pid)
  process.exit(0)
})

process.stdin.resume()

@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.