feat:WB1419 .8 compressed images

gulp/browserSyncManager.js

@@ -1,13 +1,23 @@
 var browserSync = require('browser-sync');
 
+var bsyncHandle = null;
 
 module.exports = {
     closeServer: closeServer,
     reloadServer: reloadServer,
     streamToServer: streamToServer,
     startServer: startServer,
+    getBSyncHandle: getBSyncHandle
 };
 
+function getBSyncHandle() {
+    return bsyncHandle;
+}
+
+function initBSyncHandle(label) {
+    return bsyncHandle = ((label ? browserSync.create(label) : browserSync.create()));
+}
+
 function closeServer(label) {
    browserSync.get(label).exit();
 }
@@ -25,9 +35,9 @@ function startServer(args) {
     var port = args.port;
     var baseDir = args.baseDir;
     var middleware = args.middleware;
-    var open = args.open;
+    var open = args.open || false;  // Callee, '08-servers.js' does not set this to a value so expect it to be undefined
 
-    var server = browserSync.create(label);
+    initBSyncHandle(label);
     var conf = {
         port: port,
         server: {
@@ -38,6 +48,6 @@ function startServer(args) {
     if(middleware) {
         conf.middleware = args.middleware;
     }
-    server.init(conf);
+    bsyncHandle.init(conf);
 
 }

gulp/config.js

@@ -92,6 +92,10 @@ function viewJsDir() {
     return `primo-explore/custom/${view}/js`;
 }
 
+function viewImgDir() {
+    return `primo-explore/custom/${view}/img`;
+}
+
 function mainPath() {
     return viewJsDir()+'/*.js';
 }
@@ -100,6 +104,10 @@ function mainJsPath() {
     return viewJsDir()+'/main.js';
 }
 
+function mainImgPath() {
+    return viewImgDir()+'/*.png';
+}
+
 function customCssMainPath() {
     return viewCssDir()+'/*.css';
 }
@@ -154,6 +162,9 @@ function customNpmHtmlPath() {
     return `primo-explore/custom/${view}/node_modules/primo-explore*/html/*.html`;
 }
 
+function customNpmImgPath() {
+    return `primo-explore/custom/${view}/node_modules/primo-explore*/img/*.*`;
+}
 var SERVERS = {
     local: 'http://localhost:8002'
 };
@@ -176,10 +187,12 @@ let buildParams = {
     customModulePath: customModulePath,
     mainPath: mainPath,
     mainJsPath: mainJsPath,
+    mainImgPath: mainImgPath,
     viewRootDir: viewRootDir,
     viewJsDir: viewJsDir,
     viewHtmlDir: viewHtmlDir,
     viewCssDir: viewCssDir,
+    viewImgDir: viewImgDir,
     customScssDir: customScssDir,
     customScssMainPath: customScssMainPath,
     customCssPath: customCssPath,
@@ -189,6 +202,7 @@ let buildParams = {
     customNpmJsCustomPath: customNpmJsCustomPath,
     customNpmJsModulePath: customNpmJsModulePath,
     customNpmCssPath: customNpmCssPath,
+    customNpmImgPath: customNpmImgPath,
     customNpmHtmlPath: customNpmHtmlPath,
     customCssMainPath: customCssMainPath,
     customColorsPath: customColorsPath

gulp/tasks/04-custom-css.js

@@ -8,24 +8,32 @@ let concat = require("gulp-concat");
 let debug = require('gulp-debug');
 var wrap = require("gulp-wrap");
 var glob = require('glob');
+let browserSyncManager = require('../browserSyncManager');
 
 let buildParams = config.buildParams;
 
 
 
 gulp.task('watch-css', gulp.series('select-view', (cb) => {
-    gulp.watch([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()], {interval: 1000, usePolling: true}, gulp.series('custom-css'));
+    var filesWatchGlob = [buildParams.customCssMainPath(), buildParams.customNpmCssPath()];
+    var excludesFilesGlob = ['!'+buildParams.customCssPath()]
+    gulp.watch(filesWatchGlob.concat(excludesFilesGlob), {interval: 3000, usePolling: true}, gulp.series('custom-css'));
     cb();
-}));
+})); //  
 
 
 
 
 gulp.task('custom-css', gulp.series('select-view', () => {
-
-    return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
-        .pipe(concat(buildParams.customCssFile))
-        .pipe(gulp.dest(buildParams.viewCssDir()));
-
+    if (browserSyncManager.getBSyncHandle() === null) {
+        return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
+            .pipe(concat(buildParams.customCssFile))
+            .pipe(gulp.dest(buildParams.viewCssDir()));
+    } else {
+        return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
+            .pipe(concat(buildParams.customCssFile))
+            .pipe(gulp.dest(buildParams.viewCssDir()))
+            .pipe(browserSyncManager.getBSyncHandle().stream());
+    }
 
 }));

gulp/tasks/09-images.js

@@ -3,15 +3,27 @@
 const gulp = require('gulp');
 const flatten = require('gulp-flatten');
 const config = require('../config.js');
+const imagemin = require('gulp-imagemin');
 
 let buildParams = config.buildParams;
 
 gulp.task('watch-img', () => {
-    gulp.watch([buildParams.viewImgDir(), '!'+buildParams.customNpmImgPath()], {interval: 1000, usePolling: true}, gulp.series('custom-img'));
+    var filesWatchGlob = [buildParams.viewImgDir()];
+    var excludesFilesGlob = ['!'+ buildParams.customNpmImgPath()];
+    gulp.watch(filesWatchGlob.concat(excludesFilesGlob), {interval: 1000, usePolling: true}, gulp.series('custom-img'));
 });
 
 gulp.task('custom-img', () => {
     return gulp.src(buildParams.customNpmImgPath())
         .pipe(flatten())
+        .pipe(imagemin([
+            imagemin.optipng({optimizationLevel: 5}),
+            imagemin.svgo({
+                plugins: [
+                    {removeViewBox: true},
+                    {cleanupIDs: false}
+                ]
+            })
+        ]))
         .pipe(gulp.dest(buildParams.viewImgDir()));
 });

gulp/tasks/10-create-package.js

@@ -5,7 +5,7 @@ const prompt = require('prompt');
 const zip = require('gulp-zip');
 const config = require('../config.js');
 
-gulp.task('create-package', gulp.series('select-view', 'custom-js','custom-scss','custom-css', function (cb) {
+gulp.task('create-package', gulp.series('select-view', 'custom-js', 'custom-scss', 'custom-css', 'custom-img', function (cb) {
     const code = config.view();
     console.log('Creating package for : ('+code+'.zip)');
     console.log(code);

karma.conf.js

@@ -0,0 +1,74 @@
+// Karma configuration
+// Generated on Fri Oct 13 2023 22:07:08 GMT+0100 (British Summer Time)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine', 'requirejs'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'tests/angular.min.js',
+      'tests/angular-mocks.js',
+      // {pattern: 'primo-explore/custom/IAMS_VU2/js/*.js', included: false},
+      {pattern: 'gulp/config.js', included: true},
+      {pattern: 'tests/automated/**/*Spec.js', included: false},
+      'tests/test-main.js'
+    ],
+
+
+    // list of files / patterns to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_ERROR,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+}

package.json

@@ -1,8 +1,23 @@
 {
   "name": "primo-explore-devenv",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "The Exlibris Primo Open Discovery Framework",
   "author": "noamamit92",
+  "engines": {
+    "node": ">=13.14.0 < 15"
+  },
+  "browserslist": [
+    "last 2 version",
+    "> 2%"
+  ],
+  "repository": "https://github.com/ExLibrisGroup/primo-explore-devenv",
+  "dependencies": {
+    "requirejs": "2.1.0"
+  },
+  "scripts": {
+    "testrunnerstart": "node ./node_modules/karma/bin/karma start karma.conf.js",
+    "testf-e": "node ./node_modules/karma/bin/karma run"
+  },
   "devDependencies": {
     "babel-core": "6.26.3",
     "babel-plugin-angularjs-annotate": "0.8.2",
@@ -13,7 +28,7 @@
     "babel-preset-stage-2": "^6.24.1",
     "babelify": "8.0.0",
     "bluebird": "3.5.4",
-    "browser-sync": "2.9.9",
+    "browser-sync": "^2.23.7",
     "browserify": "16.2.3",
     "camel-case": "^3.0.0",
     "colors": "^1.3.3",
@@ -35,18 +50,26 @@
     "gulp-cssnano": "^2.1.3",
     "gulp-debug": "4.0.0",
     "gulp-flatten": "^0.4.0",
+    "gulp-imagemin": "^7.1.0",
     "gulp-plumber": "1.2.0",
     "gulp-rename": "1.4.0",
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "2.6.5",
     "gulp-streamify": "1.0.2",
     "gulp-template": "5.0.0",
     "gulp-uglify": "3.0.2",
+    "gulp-using": "^0.1.1",
     "gulp-util": "3.0.8",
     "gulp-wrap": "^0.15.0",
     "gulp-zip": "4.2.0",
     "gulp4-run-sequence": "^1.0.1",
     "http-response-object": "3.0.2",
+    "jasmine-core": "3.5.0",
+    "karma": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-firefox-launcher": "1.1.0",
+    "karma-jasmine": "1.1.1",
+    "karma-requirejs": "1.1.0",
     "listdirs": "3.1.1",
     "lodash": "4.17.19",
     "merge-stream": "1.0.1",
@@ -63,13 +86,5 @@
     "tar-fs": "2.0.0",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0"
-  },
-  "engines": {
-    "node": ">=16.17.0"
-  },
-  "browserslist": [
-    "last 2 version",
-    "> 2%"
-  ],
-  "repository": "https://github.com/ExLibrisGroup/primo-explore-devenv"
-}
+  }
+}

primo-explore/custom/.gitignore

@@ -1,8 +1,16 @@
 *.*
 # Add entries to prefixed with '!' to unhide your view files:
 # Eg:
-# !*/css/**
-# !*/html/**
-# !*/img/**
-# !*/js/**
+#!*/css/**
+#!*/js/**
+#!*/html/**
+#!*/img/**
+!*/css/**
+# The custom reskining files are now Git-visible from the above....BUT...
+# the end-product of the build itself css/custom1.css does not need to be
+# tracked hence the below
+**/css/custom1.css
+**/js/custom.js
+**/img/*
+