Last active
October 12, 2015 14:58
-
-
Save gfranko/3752005 to your computer and use it in GitHub Desktop.
Backbone-Require-Boilerplate (BRB) Mobile and Desktop Build Configuration with almond.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Node.js - Require.js Build Script | |
| // To run the build type the following: node app.build.js | |
| // Loads the Require.js Optimizer | |
| var requirejs = require('../public/js/libs/r.js'); | |
| // Sets up the basic configuration | |
| var baseConfig = { | |
| // All modules are located relative to this path | |
| baseUrl: "../public/js/", | |
| // Sets path names and paths for modules relative to the baseUrl | |
| paths: { | |
| "mobile": "app/config/MobileInit", | |
| "desktop": "app/config/DesktopInit" | |
| }, | |
| // Wraps all scripts in an IIFE (Immediately Invoked Function Expression) | |
| // (function() { + content + }()); | |
| wrap: true, | |
| // The optimized build file will use almond.js (AMD shim) instead of the larger Require.js | |
| name: "libs/almond", | |
| // Removes third-party license comments | |
| preserveLicenseComments: false, | |
| // Uses uglify.js for minification | |
| optimize: "uglify" | |
| }; | |
| // Creates an array of build configs, the baseConfig will | |
| // be mixed into both the mobile and desktop builds below. | |
| var configs = [ | |
| { | |
| // Tells Require.js to look at mobileInit.js for all mobile shim and path configurations | |
| mainConfigFile: "../public/js/app/config/MobileInit.js", | |
| // Points to mobileInit.js (Remember that "mobile" is the module name for mobileInit.js) | |
| include: ["mobile"], | |
| // The optimized mobile build file will put into the app directory | |
| out: "../public/js/app/config/MobileInit.min.js" | |
| }, | |
| { | |
| // Tells Require.js to look at desktopInit.js for all desktop shim and path configurations | |
| mainConfigFile: "../public/js/app/config/DesktopInit.js", | |
| // Points to desktopInit.js (Remember that "desktop" is the module name for desktopInit.js) | |
| include: ["desktop"], | |
| // The optimized desktop build file will put within the app directory | |
| out: "../public/js/app/config/DesktopInit.min.js" | |
| } | |
| ]; | |
| // Function used to mix in baseConfig to a new config target | |
| function mix(target) { | |
| for (var prop in baseConfig) { | |
| if (baseConfig.hasOwnProperty(prop)) { | |
| target[prop] = baseConfig[prop]; | |
| } | |
| } | |
| return target; | |
| } | |
| //Create a runner that will run a separate build for each item | |
| //in the configs array. Thanks to @jwhitley for this cleverness | |
| var runner = configs.reduceRight(function(prev, currentConfig) { | |
| return function (buildReportText) { | |
| requirejs.optimize(mix(currentConfig), prev); | |
| }; | |
| }, function(buildReportText) { | |
| console.log(buildReportText); | |
| }); | |
| console.log("Building... this might take a few seconds"); | |
| //Run the builds | |
| runner(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ui-mobile-rendering" lang="en"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ui-mobile-rendering" lang="en"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9 ui-mobile-rendering" lang="en"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js ui-mobile-rendering" lang="en"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- Use the .htaccess and remove these lines to avoid edge case issues. | |
| More info: h5bp.com/i/378 --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Backbone-Require Boilerplate</title> | |
| <meta name="description" content="Backbone.js and Require.js Boilerplate Library"> | |
| <!-- Mobile viewport optimized: h5bp.com/viewport --> | |
| <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> | |
| <!--Detect if the browser is a mobile browser or a desktop browser and conditionally include your JavaScript --> | |
| <script> | |
| // Mobile/Desktop Detection script | |
| (function(ua, w, d, undefined) { | |
| // App Environment | |
| // --------------- | |
| // Tip: Set to false to turn on "development" mode | |
| var production = true, | |
| // Configuration object that will contain the correct prod/dev CSS and JavaScript files to load | |
| config = {} | |
| // Listen to the DOMContentLoaded Event (Supported in IE9+, Chrome Firefox, Safari) | |
| w.addEventListener("DOMContentLoaded", function() { | |
| // Mobile/Tablet Logic | |
| if((/iPhone|iPod|iPad|Android|BlackBerry|Opera Mini|IEMobile/).test(ua)) { | |
| // Mobile/Tablet CSS and JavaScript files to load | |
| config = { | |
| // CSS files that are loaded when in development mode | |
| "dev-css": ["css/libs/jquery.mobile.css"], | |
| // CSS files that are loaded when in production mode | |
| "prod-css": ["css/libs/jquery.mobile.min.css"], | |
| // JavaScript files that are loaded when in development mode | |
| "dev-js": [{ "data-main": "js/app/config/MobileInit.js", "src": "js/libs/require.js" }], | |
| // JavaScript files that are loaded when in production mode | |
| "prod-js": ["js/app/config/MobileInit.min.js"] | |
| }; | |
| } | |
| // Desktop Logic | |
| else { | |
| // Desktop CSS and JavaScript files to load | |
| config = { | |
| // Loaded when not in production mode | |
| "dev-css": ["css/libs/bootstrap.css"], | |
| // Loaded when in production mode | |
| "prod-css": ["css/libs/bootstrap.min.css"], | |
| // Loaded when not in production mode | |
| "dev-js": [{ "data-main": "js/app/config/DesktopInit.js", "src": "js/libs/require.js" }], | |
| // Loaded when in production mode | |
| "prod-js": ["js/app/config/DesktopInit.min.js"] | |
| } | |
| } | |
| // Loads the correct CSS and JavaScript files | |
| loadFiles(config, function() { | |
| // After both the mobile css and Require.js are loaded, the css file used for both mobile and desktop is loaded | |
| loadFiles({ | |
| // Loaded when not in production mode | |
| "dev-css": ["css/commonstyles.css"], | |
| // Loaded when in production mode | |
| "prod-css": ["css/commonstyles.min.css"] | |
| }); | |
| }); | |
| function loadCSS(urls, callback) { | |
| var x, link; | |
| for(x = 0; x <= urls.length - 1; x += 1) { | |
| link = d.createElement("link"); | |
| link.type = "text/css"; | |
| link.rel = "stylesheet"; | |
| link.href = urls[x]; | |
| d.querySelector("head").appendChild(link); | |
| } | |
| if(callback) callback(); | |
| } | |
| function loadJS(files, callback) { | |
| var x, script, file | |
| for(x = 0; x <= files.length - 1; x += 1) { | |
| file = files[x]; | |
| script = d.createElement('script'); | |
| if(((typeof file).toLowerCase()) === "object" && file["data-main"] !== undefined) { | |
| script.setAttribute("data-main", file["data-main"]); | |
| script.src = file.src; | |
| } | |
| else { | |
| script.src = file; | |
| } | |
| d.body.appendChild(script); | |
| } | |
| if(callback) callback(); | |
| } | |
| function loadFiles(obj, callback) { | |
| if(production) { | |
| // Loads the production CSS file(s) | |
| loadCSS(obj["prod-css"], function() { | |
| // If there are production JavaScript files to load | |
| if(obj["prod-js"]) { | |
| // Loads the correct initialization file (which includes Almond.js) | |
| loadJS(obj["prod-js"], callback); | |
| } | |
| }); | |
| } | |
| // Else if your app is in development mode | |
| else { | |
| // Loads the development CSS file(s) | |
| loadCSS(obj["dev-css"], function() { | |
| // If there are development Javascript files to load | |
| if(obj["dev-js"]) { | |
| // Loads Require.js and tells Require.js to find the correct intialization file | |
| loadJS(obj["dev-js"], callback); | |
| } | |
| }); | |
| } | |
| } | |
| }, false); | |
| })(navigator.userAgent || navigator.vendor || window.opera, window, window.document); | |
| </script> | |
| </head> | |
| <body> | |
| <div data-role="page"> | |
| <header data-role="header" class="navbar nav navbar-inner"> | |
| <h1>Backbone-Require-Boilerplate (BRB)</h1> | |
| </header> <!-- /header --> | |
| <div class="container-fluid" data-role="content"> | |
| <div class="row-fluid"> | |
| <div class="span12"> | |
| <div class="example"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer navbar navbar-fixed-bottom" data-role="footer"> | |
| <p>Written by <a href="https://github.com/gfranko" target="_blank">Greg Franko</a></p> | |
| </footer><!-- /footer --> | |
| </div> <!-- /page --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This script is based on this gist by James Burke