Skip to content

Commit

Permalink
feat(app generator): add option to let app load jQuery through a CDN
Browse files Browse the repository at this point in the history
  • Loading branch information
@cueedee
cueedee committed Aug 26, 2016
1 parent 925d1ca commit d974ed4
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 23 deletions.
6 changes: 6 additions & 0 deletions generators/app/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
66 changes: 50 additions & 16 deletions generators/app/templates/@Gruntfile.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,9 @@
## ====
##

path = require( 'path' )
_ = require( 'underscore' )
child_process = require( 'child_process' )
path = require( 'path' )
_ = require( 'underscore' )

module.exports = ( grunt ) ->

Expand All @@ -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


##
Expand All @@ -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
Expand All @@ -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'
Expand Down Expand Up @@ -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
##
Expand Down Expand Up @@ -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<@ } @>
)


Expand All @@ -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'
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand Down
6 changes: 5 additions & 1 deletion generators/app/templates/@package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@
"browserify-shim"
]
},
"browserify-shim": {},
"browserify-shim": {<% if ( jqueryCdn ) { %>
"jquery": {
"exports": "global:jQuery"
}
<% } %>},
"dependencies": {},
"description": "<%- packageDescription %>",
"devDependencies": {},
Expand Down
5 changes: 3 additions & 2 deletions generators/app/templates/src/app.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.$ = $<% } %>


## ============================================================================
Expand Down
9 changes: 5 additions & 4 deletions generators/app/templates/src/index.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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><%

//
Expand All @@ -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 ) { @><%

Expand Down Expand Up @@ -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>
25 changes: 25 additions & 0 deletions generators/app/templates/test/unit/init.coffee
View file
Original file line number Diff line number Diff line change
@@ -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]
Expand Down

0 comments on commit d974ed4

Please sign in to comment.