From: Bill Erickson <berickxx@gmail.com>
Date: Fri, 19 May 2017 19:42:40 +0000 (-0400)
Subject: LP#1692097 Webstaff JS minify/concat improvements
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=31333f97c1a180d4f22ebdfe7e0c6831bf588e62;p=working%2FEvergreen.git

LP#1692097 Webstaff JS minify/concat improvements

* Support minifying the core Evergreen services files (i.e. service/*.js).
  Previously, they were only concatenated.

* Create one concatenated file for external dependencies (jquery, angular,
  etc.) and a separate concatenated file for Evergreen core service files.

  Included in this is replacing the template variable EXPAND_WEB_IMPORTS
  with EXPAND_WEB_DEP_IMPORTS and EXPAND_WEB_CORE_IMPORTS.

  The thinking here is that concatenating 3rd party files (which are
  already minified) is an easy win and should not complicate debugging,
  whereas minifying and concatenating EG service files will require more
  testing. It's also nice that you can expand one or the other as needed
  for debugging.

  The build creates evergreen-staff-client.0.0.1.deps.min.js and
  evergreen-staff-client.0.0.1.core.min.js

* Various fixes to the Gruntfile, including missing dependency
  references and fixing some faulty assumptions from early iterations of
  the file.

* Remove OpenSRF JS from the minify/concat processes. Otherwise, we have
  to add some variable replacements in Gruntfile to avoid hard-coding the
  path to the OpenSRF js files. Not sure it's worth it for 3 small-ish
  files.

* Minify 3 external dependencies that do not come minified.

* Turn off EXPAND_WEB_DEP_IMPORTS by default.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---

diff --git a/Open-ILS/src/templates/staff/base_js.tt2 b/Open-ILS/src/templates/staff/base_js.tt2
index 82b662e432..9c87cbccfe 100644
--- a/Open-ILS/src/templates/staff/base_js.tt2
+++ b/Open-ILS/src/templates/staff/base_js.tt2
@@ -1,9 +1,14 @@
 <script src="/IDL2js"></script>
 <script src="[% ctx.media_prefix %]/js/dojo/opensrf/md5.js"></script>
 
-[% IF EXPAND_WEB_IMPORTS %]
+<!-- IDL / opensrf (network) -->
+<script src="[% ctx.media_prefix %]/js/dojo/opensrf/JSON_v1.js"></script>
+<script src="[% ctx.media_prefix %]/js/dojo/opensrf/opensrf.js"></script>
+<script src="[% ctx.media_prefix %]/js/dojo/opensrf/opensrf_ws.js"></script>
 
-<!-- angular -->
+
+[% IF EXPAND_WEB_DEP_IMPORTS %]
+<!-- expanded list of 3rd-party dependency files -->
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/jquery.min.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular.min.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular-route.min.js"></script>
@@ -15,17 +20,18 @@
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular-sanitize.min.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular-cookies.min.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/ngToast.min.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular-tree-control.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular-tree-control.min.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/iframeResizer.min.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/ng-order-object-by.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/ng-order-object-by.min.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/lovefield.min.js"></script>
+[% ELSE %]
 
-<!-- IDL / opensrf (network) -->
-<script src="[% ctx.media_prefix %]/js/dojo/opensrf/JSON_v1.js"></script>
-<script src="[% ctx.media_prefix %]/js/dojo/opensrf/opensrf.js"></script>
-<script src="[% ctx.media_prefix %]/js/dojo/opensrf/opensrf_ws.js"></script>
+<!-- concatenated list of 3rd-party dependency files -->
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/evergreen-staff-client.[% EVERGREEN_VERSION %].deps.min.js"></script>
+[% END %]
 
-<!-- evergreen core services -->
+[% IF EXPAND_WEB_CORE_IMPORTS %]
+<!-- expanded list of EG core service files -->
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/core.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/strings.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/idl.js"></script>
@@ -45,12 +51,10 @@
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/ui.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/date.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/op_change.js"></script>
-
 [% ELSE %]
 
-<!-- concatenated, minified version of all of the above -->
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/evergreen-staff-client.[% EVERGREEN_VERSION %].min.js"></script>
-
+<!-- concatenated, minified version of EG core service files -->
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/evergreen-staff-client.[% EVERGREEN_VERSION %].core.min.js"></script>
 [% END %]
 
 <script>
diff --git a/Open-ILS/src/templates/staff/config.tt2 b/Open-ILS/src/templates/staff/config.tt2
index c563d7ab97..a952f50e33 100644
--- a/Open-ILS/src/templates/staff/config.tt2
+++ b/Open-ILS/src/templates/staff/config.tt2
@@ -3,9 +3,11 @@
 # FIXME: update via build process
 EVERGREEN_VERSION='0.0.1' 
 
-# create script / css refs to individual files instead of using
-# compressed build files.  Use this for development and debugging.
-EXPAND_WEB_IMPORTS = 1; 
+# Import individual dependency files (jquery, angularjs, etc.)
+EXPAND_WEB_DEP_IMPORTS = 0;
+
+# Import individual EG core service files (useful for debuggin)
+EXPAND_WEB_CORE_IMPORTS = 1;
 
 # path to build files (js, css, fonts)
 WEB_BUILD_PATH = ctx.media_prefix _ '/js/ui/default/staff/build/';
diff --git a/Open-ILS/web/js/ui/default/staff/Gruntfile.js b/Open-ILS/web/js/ui/default/staff/Gruntfile.js
index e5941960fa..923930398e 100644
--- a/Open-ILS/web/js/ui/default/staff/Gruntfile.js
+++ b/Open-ILS/web/js/ui/default/staff/Gruntfile.js
@@ -23,7 +23,6 @@ module.exports = function(grunt) {
             'node_modules/angular-sanitize/angular-sanitize.min.js.map',
             'node_modules/angular-route/angular-route.min.js',
             'node_modules/angular-route/angular-route.min.js.map',
-            'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
             'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
             'node_modules/angular-hotkeys/build/hotkeys.min.js',
             'node_modules/angular-file-saver/dist/angular-file-saver.bundle.min.js',
@@ -114,70 +113,105 @@ module.exports = function(grunt) {
       }
     },
 
-    // concatenation + minification
+    // minification
     uglify: {
-      options: {
-        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+      deps: {
+        // Minify external deps that are not minified for us.
+        files: [{
+          expand: true,
+          src: [
+            'angular-tree-control.js',
+            'ng-order-object-by.js',
+            'ui-bootstrap-tpls.js'
+          ],
+          dest: 'build/js',
+          cwd: 'build/js',
+          ext: '.min.js'
+        }]
       },
-      dev: {
+      services: {
         files: [{
+          // Minify core Evergreen service files
           expand: true,
-          src: ['build/js/ui-bootstrap.js', 'build/js/ui-bootstrap-tpls.js'],
+          src: [
+            'core.js',
+            'strings.js',
+            'idl.js',
+            'event.js',
+            'net.js',
+            'auth.js',
+            'pcrud.js',
+            'env.js',
+            'org.js',
+            'startup.js',
+            'hatch.js',
+            'print.js',
+            'audio.js',
+            'coresvc.js',
+            'user.js',
+            'navbar.js',
+            'ui.js',
+            'date.js',
+            'op_change.js',
+          ],
           dest: 'build/js',
-          cwd: '.',
-          rename: function (dst, src) {
-            return src.replace('.js', '.min.js');
-          }
+          cwd: 'services',
+          ext: '.min.js'
         }],
-      },
-      build: {
-        src: [
-            // These are concatenated in order in the final build file.
-            // The order is important.
-            'build/js/jquery.min.js',
-            'build/js/angular.min.js',
-            'build/js/angular-animate.min.js',
-            'build/js/angular-sanitize.min.js',
-            'build/js/angular-route.min.js',
-            'build/js/ui-bootstrap.min.js',
-            'build/js/ui-bootstrap-tpls.js',
-            'build/js/hotkeys.min.js',
-            'build/js/angular-tree-control.js',
-            'build/js/ngToast.min.js',
-            'build/js/lovefield.min.js',
-            // NOTE: OpenSRF must be installed
-            // XXX: Should not be hard-coded
-            '/openils/lib/javascript/JSON_v1.js',
-            '/openils/lib/javascript/opensrf.js',
-            '/openils/lib/javascript/opensrf_ws.js',
-            'services/core.js',
-            'services/strings.js',
-            'services/idl.js',
-            'services/event.js',
-            'services/net.js',
-            'services/auth.js',
-            'services/pcrud.js',
-            'services/env.js',
-            'services/org.js',
-            'services/startup.js',
-            'services/hatch.js',
-            'services/print.js',
-            'services/audio.js',
-            'services/coresvc.js',
-            'services/navbar.js',
-            'services/ui.js',
-            'services/date.js',
-            'services/op_change.js',
-        ],
-        dest: 'build/js/<%= pkg.name %>.<%= pkg.version %>.min.js'
-      },
+      }
     },
 
-    // bare concat operation; useful for testing concat w/o minification
-    // to more easily detect if concat order is incorrect
     concat: {
       options: {
        separator: ';',
+       sourceMap: true,
+       banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+      },
+      // External dependencies
+      eg_deps : {
+        src : [
+          'build/js/jquery.min.js',
+          'build/js/angular.min.js',
+          'build/js/angular-route.min.js',
+          'build/js/ui-bootstrap-tpls.min.js',
+          'build/js/hotkeys.min.js',
+          'build/js/angular-file-saver.bundle.min.js',
+          'build/js/angular-location-update.min.js',
+          'build/js/angular-animate.min.js',
+          'build/js/angular-sanitize.min.js',
+          'build/js/angular-cookies.min.js',
+          'build/js/ngToast.min.js',
+          'build/js/angular-tree-control.min.js',
+          'build/js/iframeResizer.min.js',
+          'build/js/ng-order-object-by.min.js',
+          'build/js/lovefield.min.js',
+        ],
+        dest: 'build/js/<%= pkg.name %>.<%= pkg.version %>.deps.min.js'
+      },
+      // Evergreen core services
+      eg_core : {
+        src : [
+          'build/js/core.min.js',
+          'build/js/strings.min.js',
+          'build/js/idl.min.js',
+          'build/js/event.min.js',
+          'build/js/net.min.js',
+          'build/js/auth.min.js',
+          'build/js/pcrud.min.js',
+          'build/js/env.min.js',
+          'build/js/org.min.js',
+          'build/js/startup.min.js',
+          'build/js/hatch.min.js',
+          'build/js/print.min.js',
+          'build/js/audio.min.js',
+          'build/js/coresvc.min.js',
+          'build/js/user.min.js',
+          'build/js/navbar.min.js',
+          'build/js/ui.min.js',
+          'build/js/date.min.js',
+          'build/js/op_change.min.js',
+        ],
+        dest: 'build/js/<%= pkg.name %>.<%= pkg.version %>.core.min.js'
       }
     },
 
@@ -204,9 +238,6 @@ module.exports = function(grunt) {
     }
   };
 
-  // tell concat about our uglify build options (instead of repeating them)
-  config.concat.build = config.uglify.build;
-
   // apply our configuration
   grunt.initConfig(config);
 
@@ -218,14 +249,12 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-karma');
   grunt.loadNpmTasks('grunt-exec');
 
-  // note: "grunt concat" is not required 
-  grunt.registerTask('build', ['copy', 'cssmin', 'uglify']);
+  grunt.registerTask('build', ['copy', 'cssmin', 'uglify', 'concat']);
 
   // test only, no minification
   grunt.registerTask('test', ['copy', 'exec:idl2js', 'karma:unit', 'exec:rmidl2js']);
 
-  // note: "grunt concat" is not requried 
-  grunt.registerTask('all', ['test', 'cssmin', 'uglify']);
+  grunt.registerTask('all', ['test', 'cssmin', 'uglify', 'concat']);
 
 };
 
diff --git a/Open-ILS/web/js/ui/default/staff/test/karma.conf.js b/Open-ILS/web/js/ui/default/staff/test/karma.conf.js
index 87d673130d..2e8db43bee 100644
--- a/Open-ILS/web/js/ui/default/staff/test/karma.conf.js
+++ b/Open-ILS/web/js/ui/default/staff/test/karma.conf.js
@@ -12,7 +12,7 @@ module.exports = function(config){
       'node_modules/angular-file-saver/dist/angular-file-saver.bundle.min.js',
       'node_modules/ng-toast/dist/ngToast.min.js',
       'node_modules/angular-sanitize/angular-sanitize.min.js',
-      'build/js/ui-bootstrap.js',
+      'build/js/ui-bootstrap-tpls.js',
       'build/js/hotkeys.min.js',
       'build/js/angular-cookies.min.js',
       /* OpenSRF must be installed first */