From d974ed43474a09fe1cae81998e85fc78fed7c7ab Mon Sep 17 00:00:00 2001
From: cueedee <cueedee@users.noreply.github.com>
Date: Mon, 1 Aug 2016 16:50:35 +0200
Subject: [PATCH] feat(app generator): add option to let app load jQuery
 through a CDN

---
 generators/app/index.js                       |  6 ++
 generators/app/templates/@Gruntfile.coffee    | 66 ++++++++++++++-----
 generators/app/templates/@package.json        |  6 +-
 generators/app/templates/src/app.coffee       |  5 +-
 .../app/templates/src/index.template.html     |  9 +--
 .../app/templates/test/unit/init.coffee       | 25 +++++++
 6 files changed, 94 insertions(+), 23 deletions(-)

diff --git a/generators/app/index.js b/generators/app/index.js
index 259f3135..99da5b56 100644
--- a/generators/app/index.js
+++ b/generators/app/index.js
@@ -234,6 +234,12 @@ var AppGenerator = generators.Base.extend(
                                     return answers.i18n || this.templateData.i18n;
                                 }.bind( this )
                             }
+                        ,   {
+                                type:       'confirm'
+                            ,   name:       'jqueryCdn'
+                            ,   message:    'Would you like your app to load jQuery from a CDN (googleapis.com) instead of bundling it?'
+                            ,   default:    false
+                            }
                         ,   {
                                 type:       'confirm'
                             ,   name:       'ie8'
diff --git a/generators/app/templates/@Gruntfile.coffee b/generators/app/templates/@Gruntfile.coffee
index 79c6ceb5..faf0a1e7 100644
--- a/generators/app/templates/@Gruntfile.coffee
+++ b/generators/app/templates/@Gruntfile.coffee
@@ -135,8 +135,9 @@
 ##  ====
 ##
 
-path    = require( 'path' )
-_       = require( 'underscore' )
+child_process   = require( 'child_process' )
+path            = require( 'path' )
+_               = require( 'underscore' )
 
 module.exports = ( grunt ) ->
 
@@ -147,11 +148,13 @@ module.exports = ( grunt ) ->
         ##  ------------------------------------------------
 
         ##
-        ##  Contents of npm's 'package.json' file as '<%= npm.* %>'
+        ##  Contents of npm's 'package.json' file as '<%= npm.pkg.* %>'
+        ##  Installed dependencies of npm's 'package.json' file as '<%= npm.installed.* %>'
         ##
 
         npm:
-            grunt.file.readJSON(        'package.json' )
+            pkg:                        grunt.file.readJSON( 'package.json' )
+            installed:                  JSON.parse( child_process.execSync( 'npm ls --json --prod --depth 0 --silent' )).dependencies
 
 
         ##
@@ -173,7 +176,7 @@ module.exports = ( grunt ) ->
             settings:                   'settings/'
             test:                       'test/'
 
-            artifactBase:               '<%= build.dist %><%= npm.name %>-<%= npm.version %>'
+            artifactBase:               '<%= build.dist %><%= npm.pkg.name %>-<%= npm.pkg.version %>'
 
             ##
             ##  This is the default build environment but may be overridden by the 'environment' task
@@ -196,9 +199,9 @@ module.exports = ( grunt ) ->
 
                         lint:           '<%= build.source %>**/*.coffee'
 
-                    ##                  NOTE:   <%= npm.main %> should have <%= build.dist %> as its prefix:
+                    ##                  NOTE:   <%= npm.pkg.main %> should have <%= build.dist %> as its prefix:
                     ##
-                    tgt:                '<%= npm.main %>'
+                    tgt:                '<%= npm.pkg.main %>'
 
                 brief:
                     tgt:                '<%= build.assembly.app %>build.json'
@@ -334,7 +337,16 @@ module.exports = ( grunt ) ->
                     noParse: [
                                         'jquery'
                     ]
-                )
+                )<@ if ( jqueryCdn ) { @>
+
+                ##  Do not include `jquery` in the output bundle. It is an `npm install`ed dependency, and `require()`d, chiefly, by `Backbone`.
+                ##  Instead, a `<script>` tag in the main entry point will load `jquery` from a CDN.
+                ##  A 'browserify-shim' will take care of exposing that jquery to the app. (see 'package.json')
+                ##  The app will take care of exposing it to Backbone.
+                ##
+                exclude: [
+                                        'jquery'
+                ]<@ } @>
 
             ##  Non-debugging build
             ##
@@ -790,7 +802,11 @@ module.exports = ( grunt ) ->
                     ,
                         browserifyOptions
                     ,
-                        debug:          true
+                        debug:          true<@ if ( jqueryCdn ) { @>
+
+                        ##  This is the `karma-browserify` equivalent of `browserify.options.exclude`.
+                        ##
+                        configure:      ( bundle ) -> bundle.on( 'prebundle', () -> bundle.external( 'jquery' ); return ); return<@ } @>
                     )
 
 
@@ -802,7 +818,25 @@ module.exports = ( grunt ) ->
                     ##
                     ##  https://karma-runner.github.io/1.0/config/files.html
                     ##
-                    files: [
+                    files: [<@ if ( jqueryCdn ) { @>
+                        ##  External dependencies to be loaded as `<script/>`s.
+                        ##
+                        ##    * jQuery
+                        ##
+                        ##      jQuery is in this list because the `browserify-shim` config in `package.json` specifies that `require('jquery')` will return
+                        ##      the global jQuery object:
+                        ##
+                        ##      It does this because `jQuery` will be excluded from a browserify build as specified at:
+                        ##
+                        ##          `browserify.options.exclude`
+                        ##
+                        ##      We have mimicked that behaviour through `karma.options.browserify.configure`.
+                        ##
+                        ##      Loading `jquery` from a cdn will also work, but doing it like this will minimize impact on testing during continuous
+                        ##      integration ('https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js').
+                        ##
+                        '../node_modules/jquery/dist/jquery.js'
+                    ,<@ } @>
                         ##  Setup / initialization before all tests.
                         ##
                         'unit/init.coffee'
@@ -977,10 +1011,10 @@ module.exports = ( grunt ) ->
         yuidoc:
 
             app:
-                name:                   '<%= npm.name %>'
-                description:            '<%= npm.description %>'
-                url:                    '<%= npm.homepage %>'
-                version:                '<%= npm.version %>'
+                name:                   '<%= npm.pkg.name %>'
+                description:            '<%= npm.pkg.description %>'
+                url:                    '<%= npm.pkg.homepage %>'
+                version:                '<%= npm.pkg.version %>'
 
                 options:
                     ##                  NOTE:   Globbing patterns in `paths` cannot match - any - symbolically linked directories; yuidoc will not find them.
@@ -1053,8 +1087,8 @@ module.exports = ( grunt ) ->
                 environment:    grunt.config( 'build.environment' )
                 debugging:      ( debugging is 'debug' )
 
-                name:           grunt.config( 'npm.name' )
-                version:        grunt.config( 'npm.version' )
+                name:           grunt.config( 'npm.pkg.name' )
+                version:        grunt.config( 'npm.pkg.version' )
 
                 timestamp:      +stamp
 
diff --git a/generators/app/templates/@package.json b/generators/app/templates/@package.json
index e1c2ae9f..ae3bb518 100644
--- a/generators/app/templates/@package.json
+++ b/generators/app/templates/@package.json
@@ -13,7 +13,11 @@
       "browserify-shim"
     ]
   },
-  "browserify-shim": {},
+  "browserify-shim": {<% if ( jqueryCdn ) { %>
+    "jquery": {
+      "exports": "global:jQuery"
+    }
+  <% } %>},
   "dependencies": {},
   "description": "<%- packageDescription %>",
   "devDependencies": {},
diff --git a/generators/app/templates/src/app.coffee b/generators/app/templates/src/app.coffee
index a9f6aed3..121935f8 100644
--- a/generators/app/templates/src/app.coffee
+++ b/generators/app/templates/src/app.coffee
@@ -129,11 +129,12 @@ _               = require( 'underscore' )
 ##  http://backbonejs.org/
 ##
 
-Backbone        = require( 'backbone' )
+Backbone        = require( 'backbone' )<% if ( jqueryCdn ) { %>
 
 ##  Expose jQuery to Backbone.
+##  Needed because Backbone's jquery dependency will not be bundled with the build distribution artifact.
 ##
-Backbone.$      = $
+Backbone.$      = $<% } %>
 
 
 ## ============================================================================
diff --git a/generators/app/templates/src/index.template.html b/generators/app/templates/src/index.template.html
index 4a299ae0..fb3c018e 100644
--- a/generators/app/templates/src/index.template.html
+++ b/generators/app/templates/src/index.template.html
@@ -3,7 +3,7 @@
     var buildRun = 'build-run=' + encodeURIComponent( buildRun );
 
 %>
-<html class="<%- npm.name %>" <@ if ( i18n ) { @> lang="<@= i18nLocaleDefault @>"<@ } @>>
+<html class="<%- npm.pkg.name %>" <@ if ( i18n ) { @> lang="<@= i18nLocaleDefault @>"<@ } @>>
 <head><%
 
     //
@@ -25,8 +25,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title><%- npm.name %></title>
-    <meta name="description" content="<%- npm.description %>">
+    <title><%- npm.pkg.name %></title>
+    <meta name="description" content="<%- npm.pkg.description %>">
 
     <link rel="stylesheet" type="text/css" href="<%- style %>?<%- buildRun %>" /><@ if ( ie8 ) { @><%
 
@@ -65,7 +65,8 @@
     </script><% }} %>
 </head>
 <body>
-    <div id="main-content"></div>
+    <div id="main-content"></div><@ if ( jqueryCdn ) { @>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/<%- npm.installed.jquery.version %>/jquery.min.js"></script><@ } @>
     <script src="<%- app %>?<%- buildRun %>"></script>
 </body>
 </html>
diff --git a/generators/app/templates/test/unit/init.coffee b/generators/app/templates/test/unit/init.coffee
index a76550c9..bcde3368 100644
--- a/generators/app/templates/test/unit/init.coffee
+++ b/generators/app/templates/test/unit/init.coffee
@@ -1,4 +1,29 @@
+<% if ( jqueryCdn ) { %>
+## ============================================================================
+##
+##  [jQuery]
+##
+##  http://api.jquery.com/
+##
+
+$               = require( 'jquery' )
+
+## ============================================================================
+##
+##  [Backbone]
+##
+##  http://backbonejs.org/
+##
+
+Backbone        = require( 'backbone' )
+
+##  Expose jQuery to Backbone.
+##  Needed because Backbone's jquery dependency will not be bundled with the build distribution artifact.
+##
+Backbone.$      = $
+
 
+<% } %>
 ## ============================================================================
 ##
 ##  [madlib]