Working clientside build with Uglify2 minification

Modernizr · Nov 27, 2012 · 7864af8 · 7864af8
1 parent b5e6842
commit 7864af8
Show file tree

Hide file tree

Showing 6 changed files with 11,684 additions and 3,885 deletions.
diff --git a/bin/modernizr b/bin/modernizr
@@ -1,4 +1,5 @@
 #!/usr/bin/env bash
 node ./lib/generate-init.js $1
-grunt build
+grunt build > /dev/null
 rm -rf ./tmp
+cat ./dist/modernizr-build.js
diff --git a/modular-build-min.html b/modular-build-min.html
diff --git a/modular-build.html b/modular-build.html
diff --git a/modular.html b/modular.html
@@ -2,18 +2,298 @@
 <html class="no-js" lang=en>
 <head>
   <title>Modular Modernizr Demo Page</title>
+  <style>
+    textarea {
+      width: 100%;
+      height: 20em;
+    }
+  </style>
 </head>
 <body>
-Console, yo.
-<script src="src/require.js"></script>
+<div>
+  <h1>Config JSON</h1>
+<textarea id="config-json">{
+  "options": [
+    "setClasses",
+    "addTest",
+    "html5printshiv",
+    "load"
+  ],
+  "feature-detects": [
+    "test/a/download",
+    "test/audio/audiodata",
+    "test/audio/webaudio",
+    "test/battery/lowbattery",
+    "test/canvas/todataurl",
+    "test/css/animations",
+    "test/css/backgroundposition-shorthand",
+    "test/css/backgroundposition-xy",
+    "test/css/backgroundrepeat",
+    "test/css/backgroundsize",
+    "test/css/backgroundsizecover",
+    "test/css/borderimage",
+    "test/css/borderradius",
+    "test/css/boxshadow",
+    "test/css/boxsizing",
+    "test/css/calc",
+    "test/css/columns",
+    "test/css/cubicbezierrange",
+    "test/css/displayrunin",
+    "test/css/displaytable",
+    "test/css/filters",
+    "test/css/flexbox",
+    "test/css/flexboxlegacy",
+    "test/css/fontface",
+    "test/css/generatedcontent",
+    "test/css/gradients",
+    "test/css/hsla",
+    "test/css/hyphens",
+    "test/css/lastchild",
+    "test/css/mask",
+    "test/css/mediaqueries",
+    "test/css/multiplebgs",
+    "test/css/objectfit",
+    "test/css/opacity",
+    "test/css/overflow-scrolling",
+    "test/css/pointerevents",
+    "test/css/positionsticky",
+    "test/css/reflections",
+    "test/css/regions",
+    "test/css/remunit",
+    "test/css/resize",
+    "test/css/rgba",
+    "test/css/scrollbars",
+    "test/css/subpixelfont",
+    "test/css/supports",
+    "test/css/textshadow",
+    "test/css/transforms",
+    "test/css/transforms3d",
+    "test/css/transitions",
+    "test/css/userselect",
+    "test/css/vhunit",
+    "test/css/vmaxunit",
+    "test/css/vminunit",
+    "test/css/vwunit",
+    "test/dom/classlist",
+    "test/dom/createElement-attrs",
+    "test/dom/dataset",
+    "test/dom/microdata",
+    "test/elem/datalist",
+    "test/elem/details",
+    "test/elem/output",
+    "test/elem/progress-meter",
+    "test/elem/ruby",
+    "test/elem/time",
+    "test/elem/track",
+    "test/es5/strictmode",
+    "test/event/deviceorientation-motion",
+    "test/file/api",
+    "test/file/filesystem",
+    "test/forms/fileinput",
+    "test/forms/formattribute",
+    "test/forms/inputnumber-l10n",
+    "test/forms/placeholder",
+    "test/forms/speechinput",
+    "test/forms/validation",
+    "test/iframe/sandbox",
+    "test/iframe/seamless",
+    "test/iframe/srcdoc",
+    "test/img/apng",
+    "test/img/webp-lossless",
+    "test/img/webp",
+    "test/network/connection",
+    "test/network/eventsource",
+    "test/network/xhr2",
+    "test/script/async",
+    "test/script/defer",
+    "test/storage/localstorage",
+    "test/storage/sessionstorage",
+    "test/storage/websqldatabase",
+    "test/style/scoped",
+    "test/svg/clippaths",
+    "test/svg/filters",
+    "test/svg/inline",
+    "test/svg/smil",
+    "test/url/data-uri",
+    "test/webgl/extensions",
+    "test/websockets/binary",
+    "test/window/framed",
+    "test/workers/blobworkers",
+    "test/workers/dataworkers",
+    "test/workers/webworkers",
+    "test/applicationcache",
+    "test/audio",
+    "test/battery",
+    "test/blob",
+    "test/canvas",
+    "test/canvastext",
+    "test/contenteditable",
+    "test/contentsecuritypolicy",
+    "test/contextmenu",
+    "test/cookies",
+    "test/cors",
+    "test/custom-protocol-handler",
+    "test/dart",
+    "test/dataview-api",
+    "test/draganddrop",
+    "test/emoji",
+    "test/exif-orientation",
+    "test/fullscreen-api",
+    "test/gamepad",
+    "test/getusermedia",
+    "test/hashchange",
+    "test/history",
+    "test/ie8compat",
+    "test/indexedDB",
+    "test/input",
+    "test/inputtypes",
+    "test/json",
+    "test/lists-reversed",
+    "test/mathml",
+    "test/notification",
+    "test/pagevisibility-api",
+    "test/performance",
+    "test/pointerlock-api",
+    "test/postmessage",
+    "test/quota-management-api",
+    "test/requestanimationframe",
+    "test/svg",
+    "test/touch",
+    "test/unicode",
+    "test/userdata",
+    "test/vibration",
+    "test/video",
+    "test/web-intents",
+    "test/webgl",
+    "test/websockets"
+  ]
+}</textarea>
+</div>
+
+<button id="build">If you build it</button>
+
+<div>
+  <h1>Modernizr Output</h1>
+  <h3>Development</h3>
+  <textarea id="buildoutput"></textarea>
+
+  <br />
+  <h3>Minified</h3>
+  <textarea id="buildoutputmin"></textarea>
+</div>
+
+
+
+<script src="r.js"></script>
+
+<script src="node_modules/underscore/underscore-min.js"></script>
 <script>
-  require.config({
-    baseUrl : 'src/',
-    paths : {
-      'test' : '../feature-detects'
+  var buildButton = document.getElementById('build');
+  var configArea = document.getElementById('config-json');
+
+  // avoid some config
+  define('underscore', function () { return _; });
+
+  // Handle a build
+  buildButton.onclick = function () {
+    var config = configArea.value;
+    try {
+      config = JSON.parse(config);
+    }
+    catch(e) {
+      alert('Bad config, yo');
+      return;
+    }
+
+    require(['src/generate'], function( generate ) {
+      window.modInit = generate(config);
+
+      requirejs.optimize({
+        "baseUrl" : "src/",
+        "optimize"    : "none",
+        "optimizeCss" : "none",
+        "paths" : {
+          "test" : "../../feature-detects",
+        },
+        "include" : ["modernizr-init"],
+        wrap: {
+          start: ";(function(window, document, undefined){",
+          end: "})(this, document);"
+        },
+        onBuildWrite: function (id, path, contents) {
+          if ((/define\(.*?\{/).test(contents)) {
+            //Remove AMD ceremony for use without require.js or almond.js
+            contents = contents.replace(/define\(.*?\{/, '');
+
+            contents = contents.replace(/\}\);\s*?$/,'');
+
+            if ( !contents.match(/Modernizr\.addTest\(/) && !contents.match(/Modernizr\.addAsyncTest\(/) ) {
+              //remove last return statement and trailing })
+              contents = contents.replace(/return.*[^return]*$/,'');
+            }
+          }
+          else if ((/require\([^\{]*?\{/).test(contents)) {
+            contents = contents.replace(/require[^\{]+\{/, '');
+            contents = contents.replace(/\}\);\s*$/,'');
+          }
+          return contents;
+        },
+        out : function (output) {
+          output = output.replace('define("modernizr-init", function(){});', '');
+          var outBox = document.getElementById('buildoutput');
+          var outBoxMin = document.getElementById('buildoutputmin');
+          outBox.innerHTML = output;
+          require({context: 'build'}, ['uglifyjs2'], function (u2){
+            var UglifyJS = u2.UglifyJS;
+            outBoxMin.innerHTML = '/*! Modernizr 3.0.0pre (Custom Build) | MIT */\n' + minify(UglifyJS, output, {});
+          });
+
+          // add in old hack for now, just so i don't forget
+          //outBoxMin.innerHTML = uglify( output, ['--extra', '--unsafe'] ).replace( "return a.history&&history.pushState", "return !!(a.history&&history.pushState)" );
+        }
+      }, function (buildText) {
+        console.log({ buildOutput: buildText });
+      });
+    });
+
+  };
+
+  function minify( UglifyJS, code, options) {
+    options = UglifyJS.defaults(options, {
+      outSourceMap : null,
+      sourceRoot   : null,
+      inSourceMap  : null,
+      fromString   : false,
+      warnings     : false
+    });
+    if (typeof files == "string") {
+      files = [ files ];
     }
-  });
+
+    // 1. parse
+    var toplevel = UglifyJS.parse(code, {
+      filename: 'modernizr-custombuild.min.js',
+      toplevel: toplevel
+    });
+
+    // 2. compress
+    toplevel.figure_out_scope();
+    var sq = UglifyJS.Compressor({
+      warnings: options.warnings,
+      hoist_vars: true
+    });
+    toplevel = toplevel.transform(sq);
+
+    // 3. mangle
+    toplevel.figure_out_scope();
+    toplevel.compute_char_frequency();
+    toplevel.mangle_names({except: ['Modernizr']});
+
+    // 4. output
+    var stream = UglifyJS.OutputStream({});
+    toplevel.print(stream);
+    return stream.toString();
+  }
 </script>
-<script src="src/modernizr-init.js"></script>
 </body>
 </html>