Minify CSS and JavaScript and include the vendor scripts not available on public CDNs

Author: Sharaal

Diff for: .bowerrc

@@ -1,2 +1,3 @@
+/bower_components
 /node_modules
 /npm-debug.log

Diff for: .gitignore

@@ -11,7 +11,7 @@
 - Git commit/push into the master after changes
 
 ## Production
-- Set environment variable "NODE_ENV" to "production" to enable cache for swig templates and language data  
+- Set environment variable "NODE_ENV" to "production" to enable cache for swig templates
 
 ## Try it online
 http://angularjs-skeleton.herokuapp.com

Diff for: README.md

@@ -47,9 +47,7 @@ var config = {
             }]
         ],
         directory: {
-            homepage: {
-                server: process.env.SERVER
-            }
+            homepage: {}
         }
     }
 };

Diff for: app.js

@@ -1,5 +1,12 @@
 'use strict';
 
+// Load the vendor dependencies not available in public CDNs
+
+require('../bower_components/angular-bootstrap-show-errors/src/showErrors.js');
+require('../bower_components/angular-route/angular-route.js');
+require('../bower_components/angular-translate/angular-translate.js');
+require('../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js');
+
 // AngularJS and translation provider initialization
 
 var dependencies = [
@@ -13,11 +20,11 @@ var dependencies = [
 ];
 
 angular.module('app', dependencies)
-    .config(function ($translateProvider) {
+    .config(['$translateProvider', function ($translateProvider) {
         $translateProvider.useStaticFilesLoader({
             prefix: '/languages/',
             suffix: '.json'
         });
         $translateProvider.registerAvailableLanguageKeys(['de', 'en']);
         $translateProvider.determinePreferredLanguage();
-    });
+    }]);

Diff for: js/app.js

@@ -6,11 +6,9 @@ module.exports = 'controllers/homepage';
 var dependencies = [];
 
 angular.module(module.exports, dependencies)
-    .config(['$routeProvider',
-        function ($routeProvider) {
-            $routeProvider
-                .when('/', {
-                    templateUrl: 'views/homepage.html'
-                });
-        }
-    ]);
+    .config(['$routeProvider', function ($routeProvider) {
+        $routeProvider
+            .when('/', {
+                templateUrl: 'views/homepage.html'
+            });
+    }]);

Diff for: js/controllers/homepage.js

@@ -6,8 +6,8 @@ module.exports = 'controllers/navigation';
 var dependencies = [];
 
 angular.module(module.exports, dependencies)
-    .controller('NavigationCtrl', function ($scope, $location) {
+    .controller('NavigationCtrl', ['$scope', '$location', function ($scope, $location) {
         $scope.isActive = function (path) {
             return path === $location.path();
         };
-    });
+    }]);

Diff for: js/controllers/navigation.js

@@ -3,15 +3,13 @@
 /**
  * Serves the homepage for the application
  * @example
-    homepage: {
-        server: process.env.SERVER
-    }
+    homepage: {}
  */
 
 module.exports = function (config, libraries, services) {
     var app = services.app;
 
     app.get('/', function (req, res) {
-        res.render('layout.html.twig', { server: config.server });
+        res.render('layout.html.twig', { config: config, env: app.get('env') });
     });
 };

Diff for: modules/homepage.js

@@ -3,12 +3,13 @@
     "version": "1.0.0",
     "homepage": "http://github.com/dragonnodejs/angularjs-skeleton",
     "scripts": {
-        "start": "node cluster.js",
-        "postinstall": "npm run bower && npm run js",
+        "postinstall": "npm run bower && npm run css && npm run js",
         "bower": "./node_modules/bower/bin/bower install",
-        "js": "./node_modules/browserify/bin/cmd.js ./js/app.js -o ./web/js/app.js",
-        "start-watch": "./node_modules/nodemon/bin/nodemon.js --watch app.js --watch modules app.js",
+        "css": "./node_modules/minifier/index.js ./web/css/app.css",
+        "js": "./node_modules/browserify/bin/cmd.js ./js/app.js -o ./web/js/app.js && ./node_modules/minifier/index.js ./web/js/app.js",
         "js-watch": "./node_modules/watchify/bin/cmd.js ./js/app.js -o ./web/js/app.js",
+        "start": "node cluster.js",
+        "start-watch": "./node_modules/nodemon/bin/nodemon.js --watch app.js --watch modules app.js"
         "test": "mocha -R spec"
     },
     "dependencies": {
@@ -17,6 +18,7 @@
         "dragonnodejs-webserver": "^9.0.0",
         "bower": "^1.3.12",
         "browserify": "^8.1.3",
+        "minifier": "^0.6.2",
         "newrelic": "^1.15.1",
         "throng": "^1.0.0"
     },

Diff for: package.json

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html ng-app="app">
+<html ng-app="app" ng-strict-di>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,14 +8,14 @@
 
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/{{ bower.bootstrap }}/css/bootstrap.min.css" rel="stylesheet">
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/{{ bower.bootstrap }}/css/bootstrap-theme.min.css" rel="stylesheet">
-    <link href="/css/angular-bootstrap.css" rel="stylesheet">
-    <link href="/css/angular-bootstrap-show-errors.css" rel="stylesheet">
-    <link href="/css/sticky-footer.css" rel="stylesheet">
 
-    <link href="/css/app.css" rel="stylesheet">
+    {% if env == 'development' %}
+        <link href="/css/app.css" rel="stylesheet">
+    {% else %}
+        <link href="/css/app.min.css" rel="stylesheet">
+    {% endif %}
 </head>
 <body>
-
 <nav class="navbar navbar-default navbar-fixed-top">
     <div class="container">
         <div class="navbar-header">
@@ -72,14 +72,11 @@
 <script src="//ajax.googleapis.com/ajax/libs/jquery/{{ bower.jquery }}/jquery.min.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/{{ bower.bootstrap }}/js/bootstrap.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/{{ bower.angular }}/angular.min.js"></script>
-<script src="/js/vendor/angular-bootstrap-show-errors/src/showErrors.js"></script>
-<script src="/js/vendor/angular-route/angular-route.min.js"></script>
-<script src="/js/vendor/angular-translate/angular-translate.min.js"></script>
-<script src="/js/vendor/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
 
-<script>
-    var server = '{{ server }}';
-</script>
-<script src="/js/app.js"></script>
+{% if env == 'development' %}
+    <script src="/js/app.js"></script>
+{% else %}
+    <script src="/js/app.min.js"></script>
+{% endif %}
 </body>
 </html>

Diff for: views/layout.html.twig

@@ -0,0 +1 @@
+/app.min.css

Diff for: web/css/.gitignore

@@ -1,2 +1,2 @@
-/vendor
 /app.js
+/app.min.js