Build system now minify and concat app templates.

rooong · Oct 3, 2015 · 546b5ac · 546b5ac
1 parent 6eefd70
commit 546b5ac
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 42 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,14 +1,17 @@
 // GULP MODULES ===============================================================
-var gulp        = require('gulp');
-var concat      = require('gulp-concat');
-var uglify      = require('gulp-uglify');
-var minify      = require('gulp-minify-css');
-var connect     = require('gulp-connect');
-var less        = require('gulp-less');
-var jshint      = require('gulp-jshint');
-var stylish     = require('jshint-stylish');
-var exec        = require('child_process').exec;
-var merge       = require('merge-stream');
+var gulp          = require('gulp');
+var concat        = require('gulp-concat');
+var uglify        = require('gulp-uglify');
+var minifyCSS     = require('gulp-minify-css');
+var minifyHTML    = require('gulp-minify-html');
+var connect       = require('gulp-connect');
+var less          = require('gulp-less');
+var jshint        = require('gulp-jshint');
+var templateCache = require('gulp-angular-templatecache');
+var stylish       = require('jshint-stylish');
+var exec          = require('child_process').exec;
+var merge         = require('merge-stream');
+
 
 // FILES ======================================================================
 var vendor_js = [
@@ -74,7 +77,7 @@ gulp.task('_vendor_js', function() {
 
 gulp.task('_vendor_css', function() {
   return gulp.src(vendor_css)
-             .pipe(minify())
+             .pipe(minifyCSS())
              .pipe(concat('vendor.min.css'))
              .pipe(gulp.dest('build/css'))
 });
@@ -98,7 +101,7 @@ gulp.task('_preload_js', function() {
 
 gulp.task('_preload_css', function() {
   return gulp.src(preload_css)
-             .pipe(minify())
+             .pipe(minifyCSS())
              .pipe(concat('preload.min.css'))
              .pipe(gulp.dest('build/css'))
              .pipe(connect.reload())
@@ -121,20 +124,23 @@ gulp.task('_app_js', function() {
 gulp.task('_app_less', function() {
   return gulp.src(app_less)
              .pipe(less())
-             .pipe(minify())
+             .pipe(minifyCSS())
              .pipe(concat('app.min.css'))
              .pipe(gulp.dest('build/css'))
              .pipe(connect.reload())
 });
 
 gulp.task('_app_html', function() {
   return gulp.src(app_html)
-             .pipe(gulp.dest('build/app'))
+             .pipe(minifyHTML({empty:true})) 
+             .pipe(templateCache('templates.min.js', {standalone:true}))
+             .pipe(gulp.dest('build/js'))
              .pipe(connect.reload())
 });
 
 gulp.task('_app_entry', function() {
   return gulp.src(app_entry)
+             .pipe(minifyHTML({empty:true})) 
              .pipe(gulp.dest('build'))
              .pipe(connect.reload())
 });

diff --git a/package.json b/package.json
@@ -7,16 +7,18 @@
   "bugs"       : "https://github.com/behavior3/behavior3editor/issues",
   "repository" : "github:behavior3/behavior3editor",
 
-  "devDependencies": {
-    "gulp"            : "*",
-    "gulp-concat"     : "*",
-    "gulp-jshint"     : "*",
-    "gulp-uglify"     : "*",
-    "gulp-connect"    : "*",
-    "gulp-less"       : "*",
-    "gulp-minify-css" : "*",
-    "jshint-stylish"  : "*",
-    "merge-stream"    : "*"
+  "devDependencies" : {
+    "gulp"                       : "*",
+    "gulp-concat"                : "*",
+    "gulp-jshint"                : "*",
+    "gulp-uglify"                : "*",
+    "gulp-connect"               : "*",
+    "gulp-less"                  : "*",
+    "gulp-angular-templatecache" : "*",
+    "gulp-minify-css"            : "*",
+    "gulp-minify-html"           : "*",
+    "jshint-stylish"             : "*",
+    "merge-stream"               : "*"
   },
   "dependencies": {
 

diff --git a/src/app/app.js b/src/app/app.js
@@ -1,7 +1,8 @@
 angular.module('app', [
   'ui.router',
   'ui.bootstrap',
-  'ngAnimate'
+  'ngAnimate',
+  'templates'
 ])
 
 .run(['$rootScope', '$window', '$state',

diff --git a/src/app/app.routes.js b/src/app/app.routes.js
@@ -9,51 +9,51 @@ angular.module('app')
       .state('dash', {
         url: '/dash',
         abstract: true,
-        templateUrl: 'app/pages/dash/dash.html',
+        templateUrl: 'pages/dash/dash.html',
         controller: 'DashController',
         controllerAs: 'dash',
       })
       .state('dash.home', {
         url: '/home',
-        templateUrl: 'app/pages/home/home.html',
+        templateUrl: 'pages/home/home.html',
         controller: 'HomeController',
         controllerAs: 'home',
       })
       .state('dash.projects', {
         url: "/projects",
-        templateUrl: 'app/pages/projects/projects.html',
+        templateUrl: 'pages/projects/projects.html',
         controller: 'ProjectsController',
         controllerAs: 'projects',
       })
       .state('dash.settings', {
         url: "/settings",
-        templateUrl: 'app/pages/settings/settings.html',
+        templateUrl: 'pages/settings/settings.html',
         controller: 'SettingsController',
         controllerAs: 'settings',
       })
 
       // Editor
       .state('editor', {
         url: "/editor",
-        templateUrl: 'app/pages/editor/editor.html',
+        templateUrl: 'pages/editor/editor.html',
         controller: 'EditorController',
         controllerAs: 'editor',
       })
       .state('editor.editnode', {
         url: "/node/:name",
-        templateUrl: 'app/pages/editor/modals/editnode.html',
+        templateUrl: 'pages/editor/modals/editnode.html',
         controller: 'EditNodeController',
         controllerAs: 'editnode',
       })
       .state('editor.export', {
         url: "/export/:type/:format",
-        templateUrl: 'app/pages/editor/modals/export.html',
+        templateUrl: 'pages/editor/modals/export.html',
         controller: 'ExportController',
         controllerAs: 'export',
       })
       .state('editor.import', {
         url: "/import/:type/:format",
-        templateUrl: 'app/pages/editor/modals/import.html',
+        templateUrl: 'pages/editor/modals/import.html',
         controller: 'ImportController',
         controllerAs: 'import',
       });

diff --git a/src/app/directives/keytable.directive.js b/src/app/directives/keytable.directive.js
@@ -15,7 +15,7 @@
       bindToController : true,
       controller       : 'KeyTableController',
       controllerAs     : 'keytable',
-      templateUrl      : 'app/directives/keytable.html',
+      templateUrl      : 'directives/keytable.html',
       link: link
     };
     return directive;

diff --git a/src/app/directives/tab.directive.js b/src/app/directives/tab.directive.js
@@ -14,7 +14,7 @@
         heading  : '@'
       },
       transclude  : true,
-      templateUrl : 'app/directives/tab.html',
+      templateUrl : 'directives/tab.html',
       link        : link,
     };
     return directive;

diff --git a/src/app/directives/tabset.directive.js b/src/app/directives/tabset.directive.js
@@ -11,7 +11,7 @@
       transclude       : true,
       replace          : true,
       scope            : {},
-      templateUrl      : 'app/directives/tabset.html',
+      templateUrl      : 'directives/tabset.html',
       bindToController : true,
       controllerAs     : 'tabset',
       controller       : tabsetController,

diff --git a/src/app/pages/editor/editor.html b/src/app/pages/editor/editor.html
@@ -1,14 +1,14 @@
-<ng-include src="'app/pages/editor/components/menubar.html'"></ng-include>
+<ng-include src="'pages/editor/components/menubar.html'"></ng-include>
 
 <div class="sidebar left">
   <div class="content has-menubar">
-    <ng-include src="'app/pages/editor/components/nodespanel.html'"/>
+    <ng-include src="'pages/editor/components/nodespanel.html'"/>
   </div>
 </div>
 
 <div class="sidebar right">
   <div class="content has-menubar">
-    <ng-include src="'app/pages/editor/components/propertiespanel.html'"/>
+    <ng-include src="'pages/editor/components/propertiespanel.html'"/>
   </div>
 </div>
 

diff --git a/src/assets/css/preload.css b/src/assets/css/preload.css
@@ -14,7 +14,9 @@ html, body {
   background  : #171717;
   z-index     : 10000000;
   text-align  : center;
-  font-family : "Raleway", sans-serif;
+  font-size   : 16px !important;
+  font-family : "Raleway", sans-serif !important;
+  font-weight: 300 !important;
 
   -webkit-transition : opacity .5s ease-in-out;
   -moz-transition    : opacity .5s ease-in-out;
@@ -27,7 +29,7 @@ html, body {
 
 .preloading-body {
   width  : 50vw;
-  margin : 48vh auto;
+  margin : 45vh auto;
 }
 
 .preloading-body-title {

diff --git a/src/assets/js/preload.js b/src/assets/js/preload.js
@@ -0,0 +1,4 @@
+function preloadProgress(message) {
+  var element = document.getElementById('page-preload-progress');
+  element.innerHTML = message;
+}
diff --git a/src/index.html b/src/index.html
@@ -18,7 +18,7 @@
         <i class="fa fa-gear fa-spin"></i> 
         <strong>Behavior3</strong> Editor
       </span>
-      <span class="preloading-body-subtitle">
+      <span id="page-preload-progress" class="preloading-body-subtitle">
         Loading...
       </span>
 
@@ -35,8 +35,22 @@
 </body>
 </html>
 
+
+
+<script>preloadProgress('Loading vendor styles...');</script>
 <link rel="stylesheet" href="css/vendor.min.css">
+
+<script>preloadProgress('Loading app styles...');</script>
 <link rel="stylesheet" href="css/app.min.css">
+
+<script>preloadProgress('Loading vendor libraries...');</script>
 <script type="text/javascript" src="js/vendor.min.js"></script>
+
+<script>preloadProgress('Loading app libraries...');</script>
 <script type="text/javascript" src="js/app.min.js"></script>
+
+<script>preloadProgress('Loading templates...');</script>
+<script type="text/javascript" src="js/templates.min.js"></script>
+
+<script>preloadProgress('Starting application...');</script>
 <script>startApp();</script>