App: Organize it in app/src and external, build into app/dist

Move everything from app/resources into app/src and external/, given that all
files on external/ should be fetched by bower.

Ref #228

Author: rxaviers

.gitignore

@@ -1,6 +1,5 @@
-app/resources/download.all.min.js
-app/resources/themeroller.all.min.js
-app/src/template
+app/dist
+external
 jquery-ui
 log/downloads.log
 node_modules

Gruntfile.js

@@ -6,6 +6,8 @@ module.exports = function( grunt ) {
 
 "use strict";
 grunt.loadNpmTasks( "grunt-check-modules" );
+grunt.loadNpmTasks( "grunt-contrib-clean" );
+grunt.loadNpmTasks( "grunt-contrib-copy" );
 grunt.loadNpmTasks( "grunt-contrib-handlebars" );
 grunt.loadNpmTasks( "grunt-contrib-jshint" );
 grunt.loadNpmTasks( "grunt-contrib-uglify" );
@@ -23,8 +25,8 @@ grunt.initConfig({
 		},
 		compile: {
 			files: {
-				"app/src/template/download.js": [ "template/download/components.html", "template/download/service_status.html", "template/download/theme.html" ],
-				"app/src/template/themeroller.js": [ "template/themeroller/rollyourown.html", "template/themeroller/_rollyourown_group_corner.html", "template/themeroller/_rollyourown_group_default.html", "template/themeroller/_rollyourown_group_dropshadow.html", "template/themeroller/_rollyourown_group_font.html", "template/themeroller/_rollyourown_group_modaloverlay.html" ]
+				"tmp/app/template/download.js": [ "template/download/components.html", "template/download/service_status.html", "template/download/theme.html" ],
+				"tmp/app/template/themeroller.js": [ "template/themeroller/rollyourown.html", "template/themeroller/_rollyourown_group_corner.html", "template/themeroller/_rollyourown_group_default.html", "template/themeroller/_rollyourown_group_dropshadow.html", "template/themeroller/_rollyourown_group_font.html", "template/themeroller/_rollyourown_group_modaloverlay.html" ]
 			}
 		}
 	},
@@ -48,20 +50,43 @@ grunt.initConfig({
 			undef: true
 		}
 	},
+	copy: {
+		appExternal: {
+			expand: true,
+			cwd: "external",
+			src: [ "farbtastic.css", "lzma_worker.min.js" ],
+			dest: "app/dist/external"
+		},
+		appImages: {
+			expand: true,
+			cwd: "app/src",
+			src: [ "images/**/*" ],
+			dest: "app/dist"
+		},
+		appStyles: {
+			expand: true,
+			cwd: "app/src",
+			src: [ "download.css", "themeroller.css" ],
+			dest: "app/dist"
+		}
+	},
 	uglify: {
 		options: {
 			preserveComments: "some"
 		},
 		// DownloadBuilder minified frontend bundle
 		download: {
-			src: [ "app/src/external/event_emitter.min.js", "app/src/external/handlebars.runtime.js", "app/src/template/download.js", "app/src/external/lzma.js", "app/src/hash.js", "app/src/querystring.js", "app/src/model.js", "app/src/download.js" ],
-			dest: "app/resources/download.all.min.js"
+			src: [ "external/event_emitter.min.js", "external/handlebars.runtime.js", "tmp/app/template/download.js", "external/lzma.js", "app/src/hash.js", "app/src/querystring.js", "app/src/model.js", "app/src/download.js" ],
+			dest: "app/dist/download.all.min.js"
 		},
 		// ThemeRoller minified frontend bundle
 		themeroller: {
-			src: [ "app/src/external/event_emitter.min.js", "app/src/external/handlebars.runtime.js", "app/src/template/themeroller.js", "app/src/external/farbtastic.js", "app/src/external/lzma.js", "app/src/hash.js", "app/src/querystring.js", "app/src/model.js", "app/src/themeroller.js" ],
-			dest: "app/resources/themeroller.all.min.js"
+			src: [ "external/event_emitter.min.js", "external/handlebars.runtime.js", "tmp/app/template/themeroller.js", "external/farbtastic.js", "external/lzma.js", "app/src/hash.js", "app/src/querystring.js", "app/src/model.js", "app/src/themeroller.js" ],
+			dest: "app/dist/themeroller.all.min.js"
 		}
+	},
+	clean: {
+		appDist: [ "app/dist" ]
 	}
 });
 
@@ -429,7 +454,7 @@ function buildPackages( folder, callback ) {
 
 grunt.registerTask( "default", [ "check-modules", "jshint" ] );
 
-grunt.registerTask( "build-app", [ "handlebars", "uglify" ] );
+grunt.registerTask( "build-app", [ "clean", "handlebars", "copy", "uglify" ] );
 
 grunt.registerTask( "build-packages", "Builds zip package of each jQuery UI release specified in config file with all components and lightness theme, inside the given folder", function( folder ) {
 	var done = this.async();
@@ -441,7 +466,7 @@ grunt.registerTask( "build-packages", "Builds zip package of each jQuery UI rele
 });
 
 grunt.registerTask( "mkdirs", "Create directories", function() {
-	[ "app/resources/template", "log", "tmp" ].forEach(function( dir ) {
+	[ "log", "tmp" ].forEach(function( dir ) {
 		if ( !fs.existsSync( dir ) ) {
 			grunt.file.mkdir( dir );
 		}

app/resources/download.css app/src/download.css

@@ -10,7 +10,7 @@
  */
 (function( exports, $, EventEmitter, LZMA, QueryString, undefined ) {
 	var Model, DownloadBuilderModel, ThemeRollerModel, lzmaInterval,
-		lzma = new LZMA( "/resources/external/lzma_worker.min.js" ),
+		lzma = new LZMA( $( "[data-lzma-worker]" ).data( "lzma-worker" ) ),
 		lzmaLoad = $.Deferred();
 
 	// Encodes an Array of booleans [ true, false, ... ] into a string sequence "10...".

app/resources/images/download_button_on.png app/src/images/download_button_on.png

@@ -142,7 +142,7 @@
 	padding: 0;
 	text-indent: -999999px;
 	overflow: hidden;
-	background: transparent url("/resources/images/themeroller/logo_themeRoller_sml.gif") -5px 0 no-repeat;
+	background: transparent url("images/themeroller/logo_themeRoller_sml.gif") -5px 0 no-repeat;
 }
 
 /* corner radius in TR app elements */
@@ -195,11 +195,11 @@
 
 
 /* tabs colors, texture */
-#themeroller .application #rollerTabsNav {font-size: 1em; border: 1px solid #222222/* borderColorHeader */; background: #000000 url("/resources/images/themeroller/bg_tr_tabs.png") 0 50% repeat-x; color: #222222/* fcHeader */; font-weight: bold !important; border-bottom: 0; margin: 0; list-style: none;}
+#themeroller .application #rollerTabsNav {font-size: 1em; border: 1px solid #222222/* borderColorHeader */; background: #000000 url("images/themeroller/bg_tr_tabs.png") 0 50% repeat-x; color: #222222/* fcHeader */; font-weight: bold !important; border-bottom: 0; margin: 0; list-style: none;}
 #themeroller .application #rollerTabsNav .widget-header a { color: #222222/* fcHeader */; }
-#themeroller .application #rollerTabsNav li { float: left; border: 1px solid #000000/* borderColorDefault */; background: #333333 url("/resources/images/themeroller/bg_tr_tabs_tab.png") 0 50% repeat-x; font-weight: normal/* fwDefault */; color: #dddddd/* fcDefault */ !important; }
+#themeroller .application #rollerTabsNav li { float: left; border: 1px solid #000000/* borderColorDefault */; background: #333333 url("images/themeroller/bg_tr_tabs_tab.png") 0 50% repeat-x; font-weight: normal/* fwDefault */; color: #dddddd/* fcDefault */ !important; }
 #themeroller .application #rollerTabsNav li a { color: #dddddd/* fcDefault */; text-decoration: none; }
-#themeroller .application #rollerTabsNav li.state-hover { border: 1px solid #000000/* borderColorHover */; background: #333333 url("/resources/images/themeroller/bg_tr_tabs_tab_hover.png") 0  50% repeat-x; font-weight: normal/* fwDefault */; color: #ffffff/* fcHover */ !important; }
+#themeroller .application #rollerTabsNav li.state-hover { border: 1px solid #000000/* borderColorHover */; background: #333333 url("images/themeroller/bg_tr_tabs_tab_hover.png") 0  50% repeat-x; font-weight: normal/* fwDefault */; color: #ffffff/* fcHover */ !important; }
 #themeroller .application #rollerTabsNav li.state-hover a { color: #ffffff/* fcHover */; text-decoration: none; }
 #themeroller .application #rollerTabsNav li.ui-tabs-active { border: 1px solid #111111/* borderColorActive */; border-bottom: #000; background: #000 ; font-weight: normal/* fwDefault */; color: #ffffff/* fcActive */ !important; outline: none; }
 #themeroller .application #rollerTabsNav li.ui-tabs-active a { color: #ffffff/* fcActive */; outline: none; text-decoration: none; }
@@ -220,7 +220,7 @@
 
 /* Download Theme button */
 #downloadTheme  {
-	background: #fa9300 url("/resources/images/themeroller/bg_download_btn.png") repeat-x scroll 0 50%;
+	background: #fa9300 url("images/themeroller/bg_download_btn.png") repeat-x scroll 0 50%;
 	color:#222;
 	border: 1px solid #111;
 	padding: 0.3em 1.8em 0.4em 2.8em;
@@ -231,15 +231,15 @@
 	margin: -2px 0 14px 0;
 }
 #downloadTheme .download-icon {
-	background-image: url("/resources/images/themeroller/tr_icons_white.png");
+	background-image: url("images/themeroller/tr_icons_white.png");
 	background-position: -128px -192px;
 	position: absolute;
 	top: 50%;
 	left: .5em;
 	margin-top: -8px;
 }
 #downloadTheme:hover {
-	background:#faae00 url("/resources/images/themeroller/bg_download_btn_hover.png") repeat-x scroll 0 50%
+	background:#faae00 url("images/themeroller/bg_download_btn_hover.png") repeat-x scroll 0 50%
 	color: #000;
 	border-color: #000;
 }
@@ -264,17 +264,17 @@
 
 }
 /* header states */
-#themeroller .application .theme-group .theme-group-header.state-default { border: 1px solid #222/* borderColorDefault */; background: #111 url("/resources/images/themeroller/bg_tr_group_headers.png") 0 50% repeat-x; font-weight: normal; color: #aaaaaa/* fcDefault */ !important; }
+#themeroller .application .theme-group .theme-group-header.state-default { border: 1px solid #222/* borderColorDefault */; background: #111 url("images/themeroller/bg_tr_group_headers.png") 0 50% repeat-x; font-weight: normal; color: #aaaaaa/* fcDefault */ !important; }
 #themeroller .application .theme-group .theme-group-header.state-default a { color: #aaaaaa/* fcDefault */; text-decoration: none; }
-#themeroller .application .theme-group .theme-group-header.state-active { border: 1px solid #444/* borderColorActive */; border-bottom: 0 !important; background: #333 url("/resources/images/themeroller/bg_tr_group_headers_active.png") 0 50% repeat-x; font-weight: normal/* fwDefault */; color: #ffffff/* fcActive */ !important; outline: none; }
+#themeroller .application .theme-group .theme-group-header.state-active { border: 1px solid #444/* borderColorActive */; border-bottom: 0 !important; background: #333 url("images/themeroller/bg_tr_group_headers_active.png") 0 50% repeat-x; font-weight: normal/* fwDefault */; color: #ffffff/* fcActive */ !important; outline: none; }
 #themeroller .application .theme-group .theme-group-header.state-active a { color: #ffffff/* fcActive */; outline: none; text-decoration: none; }
-#themeroller .application .theme-group .theme-group-content { border: 1px solid #444/* borderColorContent */;  background: #333 url("/resources/images/themeroller/bg_tr_group_headers_content.png") 0 0 repeat-x/* bgContentRepeat */; color: #ffffff/* fcContent */; }
-#themeroller .application .theme-group .theme-group-header.state-hover { border: 1px solid #444/* borderColorHover */; background: #1a1a1a url("/resources/images/themeroller/bg_tr_group_headers_hover.png") 0  50% repeat-x; font-weight: normal/* fwDefault */; color: #cccccc/* fcHover */ !important; }
+#themeroller .application .theme-group .theme-group-content { border: 1px solid #444/* borderColorContent */;  background: #333 url("images/themeroller/bg_tr_group_headers_content.png") 0 0 repeat-x/* bgContentRepeat */; color: #ffffff/* fcContent */; }
+#themeroller .application .theme-group .theme-group-header.state-hover { border: 1px solid #444/* borderColorHover */; background: #1a1a1a url("images/themeroller/bg_tr_group_headers_hover.png") 0  50% repeat-x; font-weight: normal/* fwDefault */; color: #cccccc/* fcHover */ !important; }
 #themeroller .application .theme-group .theme-group-header.state-hover a { color: #cccccc/* fcHover */; text-decoration: none; }
 #themeroller .arrow-icon {
 	float: left;
 	margin: -2px 3px 0 0;
-	background-image: url("/resources/images/themeroller/tr_icons_white.png");
+	background-image: url("images/themeroller/tr_icons_white.png");
 }
 #themeroller .state-active .arrow-icon {
 	margin: -1px 2px 0 1px !important;
@@ -506,13 +506,13 @@ a.cornerWarning { color: red !important; text-decoration: none; }
 	z-index: 99999999;
 }
 .farbtastic .wheel {
-	background-image: url("/resources/images/farbtastic/wheel.png");
+	background-image: url("images/farbtastic/wheel.png");
 }
 .farbtastic .overlay {
-	background-image: url("/resources/images/farbtastic/mask.png");
+	background-image: url("images/farbtastic/mask.png");
 }
 .farbtastic .marker {
-	background-image: url("/resources/images/farbtastic/marker.png");
+	background-image: url("images/farbtastic/marker.png");
 }
 
 
@@ -583,15 +583,15 @@ a.cornerWarning { color: red !important; text-decoration: none; }
 	font-size: .9em;
 	text-decoration: none !important;
 	float: left;
-	background: #333 url("/resources/images/themeroller/bg_sml_download_edit_btn.png") repeat-x scroll 50% 50% ;
+	background: #333 url("images/themeroller/bg_sml_download_edit_btn.png") repeat-x scroll 50% 50% ;
 	margin: 3px 4px 0 0;
 	padding: 2px 4px;
 	border: 1px solid #222;
 	color: #ccc;
 
 }
 #themeGallery a.download:hover, #themeGallery a.edit:hover {
-	background: #444 url("/resources/images/themeroller/bg_sml_download_edit_btn_hover.png") repeat-x scroll 50% 50%;
+	background: #444 url("images/themeroller/bg_sml_download_edit_btn_hover.png") repeat-x scroll 50% 50%;
 	color: #ddd;
 }
 
@@ -606,7 +606,7 @@ a.cornerWarning { color: red !important; text-decoration: none; }
 }
 #help span.icon {
 	float: left;
-	background-image: url("/resources/images/themeroller/tr_icons_orange.png");
+	background-image: url("images/themeroller/tr_icons_orange.png");
 	height: 13px;
 	width: 14px;
 	margin: -1px 4px 0 0;

app/resources/images/farbtastic/marker.png app/src/images/farbtastic/marker.png

@@ -48,6 +48,7 @@ var Frontend = function( args ) {
 
 Frontend.prototype = {
 	index: function( params, options ) {
+		var production = this.env.toLowerCase() === "production";
 		options = options || {};
 		if ( options.wrap ) {
 			options = _.defaults({
@@ -64,7 +65,8 @@ Frontend.prototype = {
 				categories: JqueryUi.getStable().categories()
 			}),
 			host: this.host,
-			production: this.env.toLowerCase() === "production",
+			lzmaWorker: ( production ? "/resources" : "" ) + "/external/lzma_worker.min.js",
+			production: production,
 			resources: this.resources,
 			jqueryUis: jqueryUis
 		});

app/resources/images/farbtastic/mask.png app/src/images/farbtastic/mask.png

@@ -20,7 +20,7 @@ var errorTemplate = Handlebars.compile( fs.readFileSync( __dirname + "/template/
  *
  */
 var Frontend = function( options ) {
-	options = _.extend( {}, Frontend.defaults, options );
+	this.options = options = _.extend( {}, Frontend.defaults, options );
 	if ( options.config && typeof options.config === "object" ) {
 		require( "./lib/config" ).get = function() {
 			return options.config;

app/resources/images/farbtastic/wheel.png app/src/images/farbtastic/wheel.png

@@ -11,6 +11,8 @@
     "gm": "1.8.1",
     "grunt": "0.4.1",
     "grunt-check-modules": "0.2.0",
+    "grunt-contrib-clean": "0.5.0",
+    "grunt-contrib-copy": "0.4.1",
     "grunt-contrib-handlebars": "0.5.7",
     "grunt-contrib-jshint": "0.9.2",
     "grunt-contrib-uglify": "0.2.0",

app/resources/images/themeGallery/theme_30_black_matte.png app/src/images/themeGallery/theme_30_black_matte.png

@@ -7,7 +7,8 @@ process.on( "uncaughtException", function ( err ) {
 	process.exit( 1 );
 });
 
-var argv = require( "optimist" ).argv,
+var frontend, server,
+	argv = require( "optimist" ).argv,
 	Builder = require( "./lib/builder" ),
 	Cache = require( "./lib/cache" ),
 	connect = require( "connect" ),
@@ -29,10 +30,9 @@ var argv = require( "optimist" ).argv,
 		themerollerIcon: /^\/themeroller\/images\/(ui-icons_.+)$/,
 		themerollerParseTheme: "/themeroller/parsetheme.css",
 		themerollerTexture: /^\/themeroller\/images\/(ui-bg_.+)$/
-	},
-	staticDir = "app";
+	};
 
-var frontend = new Frontend();
+frontend = new Frontend();
 if ( process.argv.indexOf( "--nocache" ) === -1 ) {
 	Cache.on( 60000 * 60 );
 	Packer.cacheThemeGalleryImages();
@@ -95,9 +95,19 @@ function route( app ) {
 	});
 }
 
-connect.createServer(
-	connect.router( route ),
-	connect[ "static" ]( staticDir )
-).listen( httpPort, httpHost, function() {
+
+server = connect( connect.router( route ) );
+
+// App static directories.
+if ( frontend.options.env === "production" ) {
+	server.use( "/resources", connect[ "static" ]( "app/dist" ) );
+} else {
+	server
+		.use( "/app", connect[ "static" ]( "app/src" ) )
+		.use( "/external", connect[ "static" ]( "external" ) )
+		.use( "/template", connect[ "static" ]( "tmp/app/template" ) );
+}
+
+server.listen( httpPort, httpHost, function() {
 	console.log( "HTTP Server running at http://%s:%d", httpHost, httpPort );
 });

app/resources/images/themeGallery/theme_30_black_tie.png app/src/images/themeGallery/theme_30_black_tie.png

@@ -1,6 +1,10 @@
 <link rel="stylesheet" href="http://code.jquery.com/ui/{{resources.jqueryuiVersion}}/themes/smoothness/jquery-ui.css">
-<link rel="stylesheet" href="/resources/download.css">
-<div id="download-builder" data-base-vars="{{baseVars}}" data-download-jqueryui-host="{{host}}" data-initial-components="{{components}}">
+{{#if production}}
+    <link rel="stylesheet" href="/resources/download.css">
+{{else}}
+    <link rel="stylesheet" href="/app/download.css">
+{{/if}}
+<div id="download-builder" data-base-vars="{{baseVars}}" data-download-jqueryui-host="{{host}}" data-initial-components="{{components}}" data-lzma-worker="{{lzmaWorker}}">
 	<p class="bundle-links">
 		<strong>Quick downloads:</strong>  
 		{{#join jqueryUis " | "}}
@@ -39,12 +43,12 @@ <h2>Theme</h2>
 {{#if production}}
 	<script src="/resources/download.all.min.js"></script>
 {{else}}
-	<script src="/src/external/event_emitter.min.js"></script>
-	<script src="/src/external/handlebars.runtime.js"></script>
-	<script src="/src/template/download.js"></script>
-	<script src="/src/external/lzma.js"></script>
-	<script src="/src/hash.js"></script>
-	<script src="/src/querystring.js"></script>
-	<script src="/src/model.js"></script>
-	<script src="/src/download.js"></script>
+	<script src="/external/event_emitter.min.js"></script>
+	<script src="/external/handlebars.runtime.js"></script>
+	<script src="/template/download.js"></script>
+	<script src="/external/lzma.js"></script>
+	<script src="/app/hash.js"></script>
+	<script src="/app/querystring.js"></script>
+	<script src="/app/model.js"></script>
+	<script src="/app/download.js"></script>
 {{/if}}

app/resources/images/themeGallery/theme_30_blitzer.png app/src/images/themeGallery/theme_30_blitzer.png

@@ -260,6 +260,15 @@ <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
 <!-- Tooltip -->
 <h2 class="demoHeaders">Tooltip</h2>
 <p>
-	<img src="/resources/images/themeroller/st-stephens.jpg" alt="St. Stephen's Cathedral">
-	<img src="/resources/images/themeroller/tower-bridge.jpg" alt="Tower Bridge">
+	{{#if production}}
+		<link rel="stylesheet" href="/resources/external/farbtastic.css">
+		<link rel="stylesheet" href="/resources/themeroller.css">
+		<img src="/resources/images/themeroller/st-stephens.jpg" alt="St. Stephen's Cathedral">
+		<img src="/resources/images/themeroller/tower-bridge.jpg" alt="Tower Bridge">
+	{{else}}
+		<link rel="stylesheet" href="/external/farbtastic.css">
+		<link rel="stylesheet" href="/app/themeroller.css">
+		<img src="/app/images/themeroller/st-stephens.jpg" alt="St. Stephen's Cathedral">
+		<img src="/app/images/themeroller/tower-bridge.jpg" alt="Tower Bridge">
+	{{/if}}
 </p>