2016 development tool

.babelrc

{
  "presets": [
    "es2015",
    "react"
  ],
  "env": {
    "development": {
      "presets": [
        "power-assert"
      ]
    }
  }
}

gulpfile.js

const gulp = require('gulp'),
  $ = require('gulp-load-plugins')(),
  connect = require('connect'),
  serveStatic = require('serve-static'),
  connectLivereload = require('connect-livereload'),
  del = require('del'),
  path = require('path'),
  webpack = require('webpack'),
  glob = require('glob'),
  distDir = path.join(__dirname, 'dist'),
  bundler = webpack(webpackConfig());

function webpackConfig(environment = 'development') {
  const config = {
    entry: {
      'app': './src/scripts/app.js',
    },
    output: {
      path: path.join(distDir, 'scripts'),
      filename: '[name].js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel'
        }
      ]
    }
  };
  if (environment === 'development') {
    config.devtool = 'inline-source-map';
  } else if (environment === 'testing') {
    config.devtool = 'inline-source-map';
    config.entry = {
      test: glob.sync(path.join(__dirname, 'test/**/*-test.js'))
    };
    config.output = {
      path: path.join(__dirname, '.power-asserted'),
      filename: '[name].js'
    };
    config.module.loaders.push({
      test: /\.json$/,
      loader: 'json'
    });
  } else if (environment === 'production') {
    config.plugins = [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('production')
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ];
  }
  return config;
}

gulp.task('clean', del.bind(null, [distDir]));

gulp.task('html', () => {
  return gulp.src('src/**/*.html')
    .pipe(gulp.dest(distDir))
    .pipe($.livereload());
});

gulp.task('fonts', () => {
  return gulp.src([
    'node_modules/bootstrap/fonts/*'
  ])
    .pipe(gulp.dest(path.join(distDir, 'fonts')));
});

gulp.task('stub', () => {
  return gulp.src('src/stub/**/*.json')
    .pipe(gulp.dest(path.join(distDir, 'stub')));
});

gulp.task('image', () => {
  return gulp.src('src/img/**/*')
    .pipe(gulp.dest(path.join(distDir, 'img')));
});

function less() {
  return gulp.src('src/styles/**/*.less')
    .pipe($.plumber(function(err) {
      $.util.log('[less]', err.toString({
        colors: true,
        chunkModules: false
      }));
      // @see https://github.com/floatdrop/gulp-plumber/issues/30#issuecomment-218222434
      this.emit('end');
      this.destroy();
    }))
    .pipe($.less({
      paths: [
        'node_modules/bootstrap/less'
      ]
    }));
}

gulp.task('less:dev', () => {
  return less()
    .pipe(gulp.dest(path.join(distDir, 'styles')))
    .pipe($.livereload());
});

gulp.task('less:prod', () => {
  return less()
    .pipe($.minifyCss())
    .pipe(gulp.dest(path.join(distDir, 'styles')));
});

gulp.task('js:dev', cb => {
  bundler.run((err, stats) => {
    if (err) {
      throw new $.util.PluginError('webpack:build', err);
    }
    $.util.log('[webpack:build]', stats.toString({
      colors: true,
      chunkModules: false
    }));
    cb();
    $.livereload.reload();
  });
});

gulp.task('js:prod', cb => {
  webpack(webpackConfig('production')).run((err, stats) => {
    if (err) {
      throw new $.util.PluginError('webpack:build', err);
    }
    $.util.log('[webpack:build]', stats.toString({
      colors: true,
      chunkModules: false
    }));
    cb();
  });
});

gulp.task('js:test', cb => {
  webpack(webpackConfig('testing')).run((err, stats) => {
    if (err) {
      throw new $.util.PluginError('webpack:build', err);
    }
    $.util.log('[webpack:build]', stats.toString({
      colors: true,
      chunkModules: false
    }));
    cb();
  });
});

gulp.task('dev', ['html', 'image', 'fonts', 'stub', 'js:dev', 'less:dev', 'serve'], () => {
  gulp.watch('src/**/*.html', ['html']);
  gulp.watch('src/scripts/**/*.js', ['js:dev']);
  gulp.watch('src/styles/**/*.less', ['less:dev']);
});

gulp.task('build', ['html', 'image', 'fonts', 'stub', 'js:prod', 'less:prod']);

gulp.task('serve', () => {
  const port = Number(process.env.PORT || '3000')
  $.livereload.listen();
  connect()
    .use(connectLivereload())
    .use(serveStatic(distDir))
    .listen(port);
});

gulp.task('default', ['dev']);

package.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "gulp clean && gulp default",
    "build": "gulp clean && gulp build",
    "test": "mocha --require test/setup.js test/*-test.js test/**/*-test.js",
    "mocha": "mocha --require test/setup.js",
    "gulp": "gulp",
    "testem": "testem",
    "serve": "gulp serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-power-assert": "^1.0.0",
    "babel-preset-react": "^6.16.0",
    "connect": "^3.5.0",
    "connect-livereload": "^0.6.0",
    "del": "^2.2.2",
    "eslint": "^3.12.2",
    "glob": "^7.1.1",
    "gulp": "^3.9.1",
    "gulp-less": "^3.3.0",
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "^1.4.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-util": "^3.0.7",
    "json-loader": "^0.5.4",
    "mocha": "^3.2.0",
    "power-assert": "^1.4.2",
    "serve-static": "^1.11.1",
    "testem": "^1.14.1",
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}

setup.js

require('babel-register')();

testem.json

{
  "framework": "mocha",
  "before_tests": "npm run gulp js:test",
  "on_exit": "rm -rf .power-asserted",
  "src_files": [
    ".power-asserted/test.js"
  ]
}