Use Rollup for UMD and ES6 builds.

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false
+    }]
+  ]
+}

licenseBanner.txt

@@ -10,7 +10,3 @@
  *
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-
-import dat from './src/dat/index';
-
-export default dat;

package.json

@@ -2,39 +2,16 @@
   "name": "dat.gui",
   "version": "0.6.5",
   "description": "A lightweight graphical user interface for changing variables in JavaScript.",
-  "main": "index.js",
+  "main": "build/dat.gui.js",
+  "module": "build/dat.gui.module.js",
   "directories": {
     "test": "tests"
   },
-  "browserify": {
-    "transform": [
-      [
-        "babelify",
-        {
-          "presets": [
-            "es2015"
-          ]
-        }
-      ],
-      [
-        "stringify",
-        {
-          "extensions": [
-            ".html"
-          ]
-        }
-      ],
-      [
-        "sassify"
-      ]
-    ]
-  },
   "scripts": {
-    "dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap",
+    "dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c -w -m inline\" \"serve --port 8080\"",
-    "build": "npm run build-js && npm run build-css",
+    "build": "rollup -c && rollup -c rollup.config.min.js",
-    "build-js": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
-    "build-css": "node-sass src/dat/gui/style.scss build/dat.gui.css",
     "build-docs": "jsdoc2md -f src/dat/gui/GUI.js src/dat/controllers/Controller.js src/dat/controllers/NumberController.js | replace-between --target API.md --token API",
+    "lint": "eslint src",
     "postversion": "git push && git push --tags && npm publish"
   },
   "repository": {
@@ -48,28 +25,25 @@
   },
   "homepage": "https://github.com/dataarts/dat.gui#readme",
   "devDependencies": {
-    "babel-core": "^6.14.0",
+    "babel-core": "^6.26.0",
-    "babel-loader": "^6.2.5",
+    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-preset-env": "^1.6.1",
-    "babel-preset-stage-0": "^6.5.0",
+    "concurrently": "^3.5.1",
-    "css-loader": "^0.25.0",
     "eslint": "^3.5.0",
     "eslint-config-airbnb-base": "^7.1.0",
     "eslint-loader": "^1.5.0",
     "eslint-plugin-import": "^1.15.0",
     "extend": "^3.0.0",
-    "html-loader": "^0.4.4",
     "jsdoc-to-markdown": "^3.0.2",
     "node-sass": "^3.10.0",
     "replace-between": "0.0.8",
-    "sass-loader": "^4.0.2",
+    "rollup": "^0.54.1",
-    "webpack": "1.14.x"
+    "rollup-plugin-babel": "^3.0.3",
-  },
+    "rollup-plugin-cleanup": "^2.0.0",
-  "dependencies": {
+    "rollup-plugin-node-resolve": "^3.0.2",
-    "babel-preset-es2015": "^6.14.0",
+    "rollup-plugin-sass": "^0.5.3",
-    "babelify": "^7.3.0",
+    "rollup-plugin-uglify": "^2.0.1",
-    "sassify": "^4.0.0",
+    "serve": "^6.4.8"
-    "stringify": "^5.1.0"
   },
   "eslintConfig": {
     "extends": "airbnb-base",

rollup.config.js

@@ -0,0 +1,47 @@
+/**
+ * dat-gui JavaScript Controller Library
+ * http://code.google.com/p/dat-gui
+ *
+ * Copyright 2011 Data Arts Team, Google Creative Lab
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+import fs from 'fs';
+import path from 'path';
+import resolve from 'rollup-plugin-node-resolve';
+import cleanup from 'rollup-plugin-cleanup';
+import babel from 'rollup-plugin-babel';
+import sass from 'rollup-plugin-sass';
+
+const banner = fs.readFileSync(path.join(__dirname, 'licenseBanner.txt'));
+
+export default {
+  input: 'src/dat/index.js',
+  output: [{
+    file: './build/dat.gui.js',
+    format: 'umd',
+    name: 'dat',
+    banner: banner
+  }, {
+    file: './build/dat.gui.module.js',
+    format: 'es',
+    banner: banner
+  }],
+  watch: {
+    include: 'src/**'
+  },
+  plugins: [
+    resolve(),
+    sass({options: {outputStyle: 'compressed'}}),
+    babel({
+      plugins: ['external-helpers'],
+      exclude: 'node_modules/**'
+    }),
+    cleanup()
+  ]
+};

rollup.config.min.js

@@ -0,0 +1,36 @@
+/**
+ * dat-gui JavaScript Controller Library
+ * http://code.google.com/p/dat-gui
+ *
+ * Copyright 2011 Data Arts Team, Google Creative Lab
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+import fs from 'fs';
+import path from 'path';
+import defaultConfig from './rollup.config';
+import uglify from 'rollup-plugin-uglify';
+
+const banner = fs.readFileSync(path.join(__dirname, 'licenseBanner.txt'));
+
+export default Object.assign({}, defaultConfig, {
+  output: {
+    file: './build/dat.gui.min.js',
+    format: 'umd',
+    name: 'dat',
+    banner: banner
+  },
+  plugins: [...defaultConfig.plugins, uglify({
+    output: {
+      // Preserve license commenting in minified build.
+      comments: function(node, comment) {
+        return comment.type === 'comment2';
+      }
+    }
+  })]
+});

src/dat/gui/saveDialogue.html.js

@@ -1,4 +1,4 @@
-<div id="dg-save" class="dg dialogue">
+const saveDialogContents = `<div id="dg-save" class="dg dialogue">
 
   Here's the new load parameter for your <code>GUI</code>'s constructor:
 
@@ -18,4 +18,6 @@
 
   </div>
 
-</div>
+</div>`;
+
+export default saveDialogContents;

src/dat/utils/css.js

@@ -11,7 +11,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-module.exports = {
+const css = {
   load: function(url, indoc) {
     const doc = indoc || document;
     const link = doc.createElement('link');
@@ -21,11 +21,11 @@ module.exports = {
     doc.getElementsByTagName('head')[0].appendChild(link);
   },
 
-  inject: function(css, indoc) {
+  inject: function(cssContent, indoc) {
     const doc = indoc || document;
     const injected = document.createElement('style');
     injected.type = 'text/css';
-    injected.innerHTML = css;
+    injected.innerHTML = cssContent;
     const head = doc.getElementsByTagName('head')[0];
     try {
       head.appendChild(injected);
@@ -33,3 +33,5 @@ module.exports = {
     }
   }
 };
+
+export default css;

webpack/webpack.config.js

@@ -1,73 +0,0 @@
-/**
- * dat-gui JavaScript Controller Library
- * http://code.google.com/p/dat-gui
- *
- * Copyright 2011 Data Arts Team, Google Creative Lab
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-
-var path = require("path");
-
-module.exports = {
-  target: 'web',
-
-  context: path.resolve(__dirname, '..', 'src'),
-
-  entry: {
-    main: '../index',
-
-  },
-
-  module: {
-    preLoaders: [
-      {
-        test: /\.js$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: 'eslint-loader'
-      },
-    ],
-    loaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        exclude: /(node_modules|bower_components)/,
-        query: {
-          presets: [["es2015", {"loose": true}], "stage-0"],
-          plugins: ["add-module-exports"]
-        }
-      },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      },
-      {
-        test: /\.png$/,
-        loader: 'url-loader?limit=100000'
-      },
-      {
-        test: /\.jpg$/,
-        loader: 'file-loader'
-      },
-      {
-        test: /\.scss$/,
-        loader: 'css-loader!sass-loader'
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader'
-      }
-    ]
-  },
-
-  output: {
-    path: path.join(__dirname, '..', 'build'),
-    filename: 'dat.gui.js',
-    library: ['dat'],
-    libraryTarget: 'umd'
-  }
-};

webpack/webpack.config.min.js

@@ -1,31 +0,0 @@
-/**
- * dat-gui JavaScript Controller Library
- * http://code.google.com/p/dat-gui
- *
- * Copyright 2011 Data Arts Team, Google Creative Lab
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-
-var extend = require('extend'),
-    webpack = require('webpack'),
-    webpackConfig = require('./webpack.config');
-
-var config = {
-    plugins: [
-        new webpack.optimize.UglifyJsPlugin({
-          minimize: true,
-          comments: false
-        })
-    ],
-
-    output: {
-        filename: 'dat.gui.min.js'
-    }
-}
-
-module.exports = extend(true, webpackConfig, config);