Fix sourcemap issue

gulpfile.js

@@ -11,19 +11,14 @@ var prettify = require('gulp-prettify');
 var gulpWebpack = require('gulp-webpack');
 var webpack = require('webpack');
 var plumber = require('gulp-plumber');
-
-require('node-jsx').install();
+var fs = require('fs-extra');
 
 if ('ENABLE_REACT_A11Y' in process.env)
   require('react-a11y')();
 
-var IndexFileStream = require('./lib/gulp-index-file-stream');
-var webpackConfig = require('./webpack.config');
-
 var BUILD_TASKS = [
   'copy-dirs',
   'less',
-  'webpack',
   'generate-index-files'
 ];
 
@@ -32,9 +27,38 @@ var COPY_DIRS = [
   'vendor/bootstrap/css/**',
   'vendor/bootstrap/fonts/**',
 ];
+var COMPILED_DIR = './dist/';
 
 var LESS_FILES = './less/**/*.less';
 
+function webpackTask(options) {console.log(options)
+  options = options || {};
+  var srcFile = './lib/main.js';
+  var outputPath = path.join(__dirname, COMPILED_DIR, 'js');
+  fs.removeSync(outputPath);
+  var outputName = 'bundle.js';
+  var config = require('./webpack.config');
+
+  config.entry = srcFile;
+  config.output = {
+    filename: outputName
+  };
+
+  // Let's add some extra stuff.
+  config.watch = options.watch;
+  if (options.sourcemaps) config.devtool = 'eval';
+  if (options.optimize) config.plugins = [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin()
+  ];
+
+  return function() {
+    return gulp.src(srcFile)
+      .pipe(gulpWebpack(config))
+      .pipe(gulp.dest(outputPath));
+  };
+}
+
 function onError(err) {
   gutil.log(gutil.colors.red(err));
   gutil.beep();
@@ -63,86 +87,16 @@ gulp.task('less', function () {
     .pipe(gulp.dest('./dist'));
 });
 
-gulp.task('webpack', function() {
-  webpackConfig.devtool = 'source-map';
-  webpackConfig.plugin = [
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.UglifyJsPlugin()
-  ];
-  return gulp.src(webpackConfig.entry)
-    .pipe(gulpWebpack(webpackConfig))
-    .pipe(gulp.dest('./dist'));
-});
+// gulp.task('webpack', webpackTask({sourcemaps: true}));
+// gulp.task('webpack-optimized', webpackTask({optimize: true}));
+gulp.task('watch-webpack', webpackTask({ watch: true, sourcemaps: true }));
 
-gulp.task('test', BUILD_TASKS.concat([
-  'test-react-warnings'
-]), function() {
-  gutil.log(gutil.colors.green.bold("Yay, tests pass!"));
-});
+gulp.task('build', BUILD_TASKS);
 
-gulp.task('test-react-warnings', function() {
-  var oldWarn = console.warn;
-  var warnings = 0;
-
-  console.warn = function(message) {
-    warnings++;
-    gutil.log(gutil.colors.red.bold(message));
-  };
-
-  return new IndexFileStream(require('./lib/index-static.jsx'))
-    .on('end', function() {
-      console.warn = oldWarn;
-      if (warnings) {
-        this.emit('error', new Error('At least one warning was logged.'));
-      }
-    })
-    .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('generate-index-files', function() {
-  return new IndexFileStream(require('./lib/index-static.jsx'))
-    .pipe(prettify({
-      indent_size: 2
-    }))
-    .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('default', BUILD_TASKS);
-
-gulp.task('dev', ['watch', 'server']);
-
-gulp.task('watch', _.without(BUILD_TASKS, 'webpack'), function(cb) {
-  gulp.src(webpackConfig.entry)
-    .pipe(gulpWebpack(_.extend({
-      watch: true
-    }, webpackConfig)))
-    .pipe(gulp.dest('./dist'));
-
-  gulp.watch([
-    'lib/**'
-  ], function() {
-    gutil.log('Rebuilding index HTML files.');
-
-    // Ugh, because the *old* version of our index files are
-    // already in node's require cache, we can't reload them, so
-    // we'll run gulp in a subprocess so that it uses the latest
-    // code.
-    //
-    // TODO: Figure out a better solution for this.
-    require('child_process')
-      .exec('gulp generate-index-files', function(err, stdout, stderr) {
-        if (err) {
-          gutil.log(gutil.colors.red.bold("Error rebuilding index files!"));
-          gutil.log(stdout);
-          gutil.log(stderr);
-        } else {
-          gutil.log("Index HTML files rebuilt.");
-        }
-      });
-  });
+gulp.task('dev', ['watch-less', 'watch-webpack', 'server']);
 
-  gulp.watch(COPY_DIRS, ['copy-dirs']);
-  gulp.watch(LESS_FILES, ['less']);
+gulp.task('watch-less', ['less'], function () {
+    gulp.watch('./less/**/*.less', ['less']);
 });
 
 gulp.task('server', function() {

lib/homepage.jsx → lib/homepage.js

@@ -2,8 +2,8 @@ var React = require('react');
 var Router = require('react-router');
 var Link = Router.Link;
 
-var Page = require('./page.jsx');
-var HeroUnit = require('./hero-unit.jsx');
+var Page = require('./page');
+var HeroUnit = require('./hero-unit');
 
 var CaseStudy = React.createClass({
   render: function() {

lib/main.jsx → lib/main.js

@@ -2,7 +2,7 @@ var React = require('react');
 var Router = require('react-router');
 
 var config = require('./config');
-var routes = require('./routes.jsx');
+var routes = require('./routes');
 
 function startRunningSite() {
   var url = document.querySelector('meta[name=url]').getAttribute('value');

lib/page.jsx → lib/page.js

@@ -2,8 +2,8 @@ var React = require('react');
 var Router = require('react-router');
 var RouteHandler = Router.RouteHandler;
 
-var Sidebar = require('./sidebar.jsx');
-var Footer = require('./footer.jsx');
+var Sidebar = require('./sidebar');
+var Footer = require('./footer');
 
 var Page = React.createClass({
   render: function() {

lib/routes.jsx → lib/routes.js

@@ -4,9 +4,9 @@ var Route = Router.Route;
 var Link = Router.Link;
 var DefaultRoute = Router.DefaultRoute;
 
-var Page = require('./page.jsx');
-var HeroUnit = require('./hero-unit.jsx');
-var Homepage = require('./homepage.jsx');
+var Page = require('./page');
+var HeroUnit = require('./hero-unit');
+var Homepage = require('./homepage');
 
 var Foo = React.createClass({
   render: function() {

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "description": " Initial attempt at implementing Webmaker Learning front-page.",
   "dependencies": {
+    "babel": "^4.6.6",
     "gulp": "^3.8.11",
     "gulp-gzip": "^1.0.0",
     "gulp-less": "^3.0.1",

webpack.config.js

@@ -1,18 +1,12 @@
-var webpack = require('webpack');
-
-require('node-jsx').install();
-
-var index = require('./lib/index-static.jsx');
-
 module.exports = {
-  entry: './lib/main.jsx',
-  output: {
-    path: __dirname + '/dist',
-    filename: index.JS_FILENAME
-  },
   module: {
-    loaders: [
-      {test: /\.jsx$/, loader: "jsx-loader"}
-    ]
+    loaders: [{
+      test: /\.js/,
+      loaders: ['es6', 'jsx-loader'],
+      exclude: /node_modules/
+    }, {
+      test: /\.json$/,
+      loader: 'json-loader'
+    }]
   }
 };