gulp -> npm scripts only

app-bundle.js

import App from './app.js';

import * as stylesheet from './stylesheets/enhanced.scss';

(new App()).init();

app.js

import window from 'global';
import React from 'react';
import ReactDOM from 'react-dom';
import request from 'superagent'

import Recipe from './recipe';
import RecipeList from './components/RecipeList.jsx';
import CreativeWorksStream from './components/CreativeWorksStream.jsx';

const REFRESH_INTERVAL = process.env.REFRESH_INTERVAL || 3600 * 5 * 1000;

class CreativeWorksStreamApp {
  // ...
  
  static init (options) {
    // ...
  }
}

export default CreativeWorksStreamApp;

Gulpfile.js

'use strict';

var pkg = require('./package.json');
var gulp = require('gulp');
var utils = require('gulp-util');
var source = require('vinyl-source-stream');

var isWatching = false;
var isProduction = process.env.NODE_ENV === 'production';

var browserify = require('browserify');
var watchify = require('watchify');

var sass = require('gulp-sass');
var flatten = require('./src/gulp/flatten-dir');
var manifest = require('gulp-manifest');
var webserver = require('gulp-webserver');

var runSequence = require('run-sequence');
var del = require('del');
var logMessage = function(template){
  var message = utils.template.bind(null, template);

  return function(){
    return utils.log(message({ args: arguments, file: '' }));
  };
};

var minifyConfig = {
  output: !isProduction ? './dist/assets' : null,
  minify: isProduction
};

if (isProduction) {
  minifyConfig.map = false;
}

var bundles = {
  'app-bundle.js': null
};

var paths = {
  css: './assets/stylesheets/**/*.scss',
  assets: './public/**/*',
  jsx: 'src/**/*',
  npmAssets: [
    './node_modules/@freebird/*/images/**',
    './node_modules/@freebird/*/node_modules/@freebird/*/images/**'
  ]
};

gulp.task('appcache', function(){
  var stream = gulp.src(['./dist/**/*'])
    .pipe(manifest({
      hash: true,
      preferOnline: false,
      network: ['http://*', 'https://*', '*'],
      filename: 'cache.appcache',
      exclude: 'cache.appcache'
    }))
    .pipe(gulp.dest('./dist'));

  return stream;
});

function bundleExec(bundleId){
  return bundles[bundleId].bundle()
      .pipe(source(bundleId))
      .pipe(gulp.dest('./dist/assets'));
}

gulp.task('build-bundle', function(){
    return browserify({ standalone: pkg.name })
        .add('./index.js')
      .external('./assets/vendor-bundle')
        .bundle()
        .pipe(source('component-bundle.js'))
        .pipe(gulp.dest('./dist/assets'));
});

gulp.task('prepare-bundles', function(){
  var wrap = isWatching ? watchify : function(b){ return b; };
  var bConfig = isWatching
    ? { debug: true, cache: {}, packageCache: {}, fullPaths: true,  standalone: pkg.name }
    : { debug: !isProduction, standalone: pkg.name };

  Object.keys(bundles).forEach(function(bundleId){
    bundles[bundleId] = wrap(browserify(bConfig)
      .add('./assets/javascript/' + bundleId))
      .external('react')
      .external('react-dom')
      .external('react-select')
      .plugin('minifyify', minifyConfig);

    bundles[bundleId].on('update', bundleExec.bind(null, bundleId));
    bundles[bundleId].on('update', logMessage('Bundling ' + bundleId));
    bundles[bundleId].on('time', logMessage('Finished ' + bundleId + ' after <%= args[0] %> ms'));
    bundles[bundleId].on('error', logMessage('<%= args[0] %>'));
  });
});

gulp.task('app-bundle', bundleExec.bind(null, 'app-bundle.js'));

gulp.task('vendor-bundle', function(){
  return browserify()
      .require('react')
      .require('react-dom')
      .require('react-select')
      .plugin('minifyify', minifyConfig)
      .bundle()
    .pipe(source('vendor-bundle.js'))
    .pipe(gulp.dest('./dist/assets'));
});

gulp.task('css', function(){
  return gulp.src(paths.css)
    .pipe(sass({ errLogToConsole: !isProduction }))
    .pipe(gulp.dest('./dist/assets'));
});

gulp.task('clean', function(){
  return del(['dist/**/*', '!dist/.gitignore']);
});

gulp.task('copy-assets', function(){
  return gulp.src(paths.assets)
    .pipe(gulp.dest('./dist'));
});

gulp.task('copy-dependencies-assets', function(){
  return gulp.src(paths.npmAssets)
    .pipe(flatten('images'))
    .pipe(gulp.dest('./dist/images'));
});

gulp.task('set-watch-flag', function(done){
  isWatching = true;

  done();
});

gulp.task('watch', function() {
  gulp.watch(paths.assets, ['copy-assets']);
  gulp.watch(paths.css, ['css']);
  gulp.watch(paths.jsx, ['build-bundle']);
});

gulp.task('serve', function(){
  return gulp.src('./dist').pipe(webserver({
    livereload: true,
    directoryListing: false,
    open: false,
    port: process.env.PORT || 8000
  }));
});

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

gulp.task('build', function(done){
  runSequence('clean',
              ['css', 'prepare-bundles'],
              'vendor-bundle',
              'build-bundle',
              'app-bundle',
              ['copy-assets', 'copy-dependencies-assets'], done);
});

gulp.task('build-production', function(done){
  runSequence('build', 'appcache', done);
});

gulp.task('dev', function(done){
  runSequence('set-watch-flag', 'build', ['serve', 'watch'], done);
});

new-package.json

{
  "scripts": {
    "test": "mocha --compilers js:babel-core/register test/unit",
    "posttest": "eslint --ext .js,.jsx ./assets ./src index.js",
    "build": "npm-run-all clean copy 'build:*'",
    "build:vendor": "browserify -r react -r react-dom -r react-select -d -p [ minifyify --map vendor-bundle.map.json --output ./dist/vendor-bundle.map.json ] -o ./dist/vendor-bundle.js",
    "build:app": "browserify -e ./src/app-bundle.js -x react -x react-dom -x react-select -o ./dist/app-bundle.js",
    "clean": "rimraf ./dist/**/*",
    "copy": "mkdir -p ./dist && cp ./public/* ./dist",
    "serve": "static -p ${PORT:-5000} --gzip --host-address 0.0.0.0 dist/",
    "start": "npm run serve",
    "prestart": "npm run build",
    "watch": "PORT=${PORT:-$(get-port)} npm-run-all --parallel serve build:vendor build:css 'watch:*'",
    "watch:app": "watchify -dv -e ./src/app-bundle.js -x react -x react-dom -x react-select -p livereactload -o ./dist/app-bundle.js"
  },
  "browserify": {
    "transform": [
      "babelify",
      [
        "sassify",
        {
          "auto-inject": true
        }
      ],
      "envify"
    ]
  },
  "dependencies": {
    "babelify": "^7.2.0",
    "classnames": "^2.0.0",
    "envify": "^3.3.0",
    "fastclick": "^1.0.6",
    "gel-grid": "^1.0.0",
    "gel-iconography-assets-assets": "^1.1.0",
    "gel-settings": "^0.4.1",
    "gel-tools": "^0.4.2",
    "gel-typography": "^1.0.0-beta.2",
    "global": "^4.3.0",
    "lodash": "^3.10.1",
    "minifyify": "^7.0.0",
    "moment": "^2.10.6",
    "node-static": "^0.7.6",
    "react": "^0.14.3",
    "react-autoupdate-time": "^1.0.5",
    "react-dom": "^0.14.3",
    "react-select": "^0.9.1",
    "sassify": "^0.9.0",
    "superagent": "^1.4.0",
    "tinycolor2": "^1.0.0",
    "tinygradient": "^0.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-eslint": "^4.1.6",
    "babel-plugin-syntax-object-rest-spread": "^6.1.18",
    "babel-plugin-transform-object-rest-spread": "^6.1.18",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "browserify": "^12.0.0",
    "chai": "^3.4.1",
    "eslint": "^1.10.1",
    "eslint-plugin-react": "^3.10.0",
    "get-port": "^1.0.0",
    "livereactload": "^2.1.0",
    "mocha": "^2.3.4",
    "npm-run-all": "^1.3.2",
    "rimraf": "^2.4.4",
    "watchify": "^3.0.0"
  }
}

old-package.json

{
  "scripts": {
    "test": "eslint --ext .js,.jsx ./assets ./src index.js",
    "build": "gulp build",
    "build-production": "gulp build-production",
    "start": "static -p ${PORT:-5000} --gzip --host-address 0.0.0.0 dist/",
    "watch": "PORT=${PORT:-$(get-port)} gulp dev"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react"  
          ] 
        }
      ],
      "envify"
    ]
  },
  "dependencies": {
    "babelify": "^7.2.0",
    "classnames": "^2.0.0",
    "envify": "^3.3.0",
    "fastclick": "^1.0.6",
    "gel-grid": "^1.0.0",
    "gel-iconography-assets-assets": "^1.1.0",
    "gel-settings": "^0.4.1",
    "gel-tools": "^0.4.2",
    "gel-typography": "^1.0.0-beta.2",
    "global": "^4.3.0",
    "lodash": "^3.10.1",
    "minifyify": "^7.0.0",
    "moment": "^2.10.6",
    "node-static": "^0.7.6",
    "react": "^0.14.3",
    "react-autoupdate-time": "^1.0.5",
    "react-dom": "^0.14.3",
    "react-select": "^0.9.1",
    "sassify": "^0.9.0",
    "superagent": "^1.4.0",
    "tinycolor2": "^1.0.0",
    "tinygradient": "^0.3.0"
  },
  "devDependencies": {
    "babel-eslint": "^4.1.6",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "browserify": "^11.0.0",
    "del": "^2.0.0",
    "eslint": "^1.10.1",
    "eslint-plugin-react": "^3.10.0",
    "get-port": "^1.0.0",
    "gulp": "^3.8.10",
    "gulp-manifest": "0.0.6",
    "gulp-sass": "^2.0.0",
    "gulp-util": "^3.0.3",
    "gulp-webserver": "^0.9.0",
    "run-sequence": "^1.0.0",
    "through2": "^2.0.0",
    "vinyl-source-stream": "^1.0.0",
    "watchify": "^3.0.0"
  }
}