Broccoli.js + Babel + LESS/SASS + BrowserSync

Brocfile.js

'use strict';

const TASKS = {
  build: 'build',
  serve: 'serve'
}

const BUILDING = process.argv.indexOf(TASKS.build) > 0;
const SERVING = process.argv.indexOf(TASKS.serve) > 0;

// Parse --port cli argument
var port = +process.argv.join('').split(/--port=?/)[1] || 4200;

var Funnel = require('broccoli-funnel'); // Filter trees
var MergeTrees = require('broccoli-merge-trees'); // Merge trees
var concat = require('broccoli-concat'); // Concatenate trees
var babel = require('broccoli-babel-transpiler'); // Babel transpiler
var uglify = require('broccoli-uglify-sourcemap'); // UglifyJS
var Sass = require('broccoli-sass'); // SASS compiler
var autoprefixer = require('broccoli-autoprefixer'); // Autoprefixer
var Sync = require('broccoli-browser-sync-bv'); // BrowserSync

var srcDir = 'src';
var sassDir = srcDir + '/scss';
var jsDir = srcDir + '/js';

// Grab vendor scripts
var vendorFiles = [
  'jquery/dist/jquery.js',
  'fullpage.js/dist/jquery.fullpage.js'
];

var vendorJs = new Funnel('node_modules', {
  files: vendorFiles
});

if (BUILDING) {
  vendorJs = uglify(vendorJs);
}

// Transpile the source files
var appJs = babel(jsDir);

// Concatenate and minify sources
var scripts = new MergeTrees([vendorJs, appJs]);
scripts = concat(scripts, {
  inputFiles: ['**/*.js'],
  headerFiles: vendorFiles,
  outputFile: '/static/js/script.js'
});

// Compile SCSS styles
var styles = new Sass([sassDir, 'node_modules'],
  'style.scss',
  'static/css/style.css',
  {outputStyle: 'expanded'}
);

// Autoprefixer
styles = autoprefixer(styles, {
  browsers: ['last 3 versions', 'Firefox ESR']
});

// Grab the HTML
var html = new Funnel(srcDir, {
  // files: ['index.html']
  include: ['*.html']
});

// Grab images
var images = new Funnel(srcDir, {
  srcDir: 'img',
  destDir: '/static/img'
});

// Grab fonts
var fonts = new Funnel(srcDir, {
  srcDir: 'fonts',
  destDir: '/static/fonts'
});

var exports = new MergeTrees([
  html,
  scripts,
  styles,
  images,
  fonts,
]);

if (SERVING) {
  // Set up live reloading via BrowserSync
  var browserSync = new Sync([html, scripts, styles, images, fonts], {
    port: port,
    browserSync: {
      port: 9000,
      open: false,
      ghostMode: false,
      notify: false
    }
  });

  exports = new MergeTrees([
    exports,
    browserSync
  ]);
}

// Grab all our trees and
// export them as a single and final tree
module.exports = exports;

now with --port command-line argument support for BrowserSync

Latest revision has the ability to detect building mode and omit some tasks then.