LP#1692097 Webstaff JS minify/concat improvements user/berick/lp1692097-webstaff-js-minify-repairs
authorBill Erickson <berickxx@gmail.com>
Fri, 19 May 2017 19:42:40 +0000 (15:42 -0400)
committerBill Erickson <berickxx@gmail.com>
Fri, 19 May 2017 20:16:50 +0000 (16:16 -0400)
* 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>
Open-ILS/src/templates/staff/base_js.tt2
Open-ILS/src/templates/staff/config.tt2
Open-ILS/web/js/ui/default/staff/Gruntfile.js
Open-ILS/web/js/ui/default/staff/test/karma.conf.js

index 82b662e..9c87cbc 100644 (file)
@@ -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>
 <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>
 <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>
index c563d7a..a952f50 100644 (file)
@@ -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/';
index e594196..9239303 100644 (file)
@@ -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']);
 
 };
 
index 87d6731..2e8db43 100644 (file)
@@ -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 */