Gulpfile.js

'use strict';

var fs = require('fs');

var gulp = require('gulp');  // Base gulp package
var babelify = require('babelify'); // Used to convert ES6 & JSX to ES5
var browserify = require('browserify'); // Providers "require" support, CommonJS
var notify = require('gulp-notify'); // Provides notification to both the console and Growel
var rename = require('gulp-rename'); // Rename sources
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps'); // Provide external sourcemap files
var connect = require('gulp-connect');
var gutil = require('gulp-util'); // Provides gulp utilities, including logging and beep
var chalk = require('chalk'); // Allows for coloring for logging
var source = require('vinyl-source-stream'); // Vinyl stream support
var buffer = require('vinyl-buffer'); // Vinyl stream support
var watchify = require('watchify'); // Watchify for source changes
var merge = require('utils-merge'); // Object merge tool
var duration = require('gulp-duration'); // Time aspects of your gulp process

var data = require('./data/data');

// Configuration for Gulp
var config = {
  debug: true,
  js: {
    src: './js/main.jsx',
    watch: './js/**/*',
    outputDir: './build/',
    outputFile: 'build.js',
  },
};

// Error reporting function
function mapError(err) {
  if (err.fileName) {
    // Regular error
    gutil.log(chalk.red(err.name)
      + ': ' + chalk.yellow(err.fileName.replace(__dirname + '/src/js/', ''))
      + ': ' + 'Line ' + chalk.magenta(err.lineNumber)
      + ' & ' + 'Column ' + chalk.magenta(err.columnNumber || err.column)
      + ': ' + chalk.blue(err.description));
  } else {
    // Browserify error..
    gutil.log(chalk.red(err.name)
      + ': '
      + chalk.yellow(err.message));
  }
}

// Completes the final file outputs
function bundle(bundler) {
  var bundleTimer = duration('Javascript bundle time');

  var js = bundler
    .bundle()
    .on('error', mapError) // Map error reporting
    .pipe(source('main.jsx')) // Set source name
    .pipe(buffer()) // Convert to gulp pipeline
    .pipe(rename(config.js.outputFile)); // Rename the output file

  if (!config.debug) {
    js = js.pipe(uglify());
  }

  js
    .pipe(sourcemaps.init({loadMaps: true})) // Extract the inline sourcemaps
    .pipe(sourcemaps.write('./map')) // Set folder for sourcemaps to output to
    .pipe(gulp.dest(config.js.outputDir)) // Set the output folder
    .pipe(notify({
      message: 'Generated file: <%= file.relative %>',
    })) // Output the file being created
    .pipe(bundleTimer) // Output time timing of the file creation
    .pipe(connect.reload());
}

gulp.task('production', function() {
  config.debug = false;
});

gulp.task('env', function() {
  if (config.debug) {
    process.env.DEBUG = '*';
  } else {
    process.env.NODE_ENV = 'production';
  }
});

gulp.task('connect', function() {
  connect.server({
    livereload: true
  });
});

gulp.task('sass', function () {
  gulp.src('./css/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(config.js.outputDir));
});

gulp.task('watch', function() {
  gulp.watch(['*.html', 'css/*'],
    ['reload']);
});

gulp.task('reload', function() {
  gulp.src(['*.html'])
    .pipe(connect.reload());
});

gulp.task('data', function() {
  var outputFile = './data/fields-of-view.json';
  var url = 'https://raw.githubusercontent.com/nypl-spacetime/data/master/digital-collections/digital-collections.pits.ndjson';

  gutil.log('Downloading NDJSON, creating fields-of-view, writing to `' + outputFile + '`');

  data(url)
    .pipe(fs.createWriteStream(outputFile));
});

// Gulp task for build
gulp.task('bundle', ['env', 'sass'], function() {
  var args = {};

  args.extensions = ['.jsx'];

  var bundler = browserify(config.js.src, args) // Browserify

  if (config.debug) {
    bundler = bundler
      .plugin(watchify, {ignoreWatch: ['**/node_modules/**', '**/bower_components/**']}) // Watchify to watch source file changes
  }

  bundler.transform(babelify, {presets: ['es2015', 'react']}); // Babel tranforms

  bundle(bundler); // Run the bundle the first time (required for Watchify to kick in)

  bundler.on('update', function() {
    bundle(bundler); // Re-run bundle on source updates
  });
});

gulp.task('default', ['connect', 'watch', 'bundle']);
gulp.task('build', ['production', 'bundle']);