Improvement/infrastructure (#202)

chore: Removed grunt and switched to webpack
fix: fixed broken tests on Firefox and Chrome
feat: improved demo layout

.appveyor.yml

@@ -0,0 +1,17 @@
+image: Visual Studio 2017
+environment:
+  matrix:
+    - nodejs_version: "6"
+    - nodejs_version: "7"
+    - nodejs_version: "8"
+    - nodejs_version: "9"    
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm install
+  - node --version
+  - npm --version
+build_script:
+  - npm run lint
+  - npm run build
+test_script:
+  - npm run test

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+build
+bin
+demo

.eslintrc.yml

@@ -0,0 +1,3 @@
+extends: standard
+rules:
+  indent: [2, 4]

.gitignore

@@ -23,9 +23,6 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
 # node-waf configuration
 .lock-wscript
 

.jshintrc

@@ -1,91 +0,0 @@
-{
-    // JSHint Default Configuration File (as on JSHint website)
-    // See http://jshint.com/docs/ for more details
-
-    "maxerr"        : 50,       // {int} Maximum error before stopping
-
-    // Enforcing
-    "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
-    "camelcase"     : true,     // true: Identifiers must be in camelCase
-    "curly"         : true,     // true: Require {} for every new block or scope
-    "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
-    "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
-    "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
-    "immed"         : false,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
-    "latedef"       : false,    // true: Require variables/functions to be defined before being used
-    "newcap"        : false,    // true: Require capitalization of all constructor functions e.g. `new F()`
-    "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
-    "noempty"       : true,     // true: Prohibit use of empty blocks
-    "nonbsp"        : true,     // true: Prohibit "non-breaking whitespace" characters.
-    "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
-    "plusplus"      : false,    // true: Prohibit use of `++` and `--`
-    "quotmark"      : true,     // Quotation mark consistency:
-                                //   false    : do nothing (default)
-                                //   true     : ensure whatever is used is consistent
-                                //   "single" : require single quotes
-                                //   "double" : require double quotes
-    "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
-    "unused"        : true,     // Unused variables:
-                                //   true     : all variables, last function parameter
-                                //   "vars"   : all variables only
-                                //   "strict" : all variables, all function parameters
-    "strict"        : true,     // true: Requires all functions run in ES5 Strict Mode
-    "maxparams"     : false,    // {int} Max number of formal params allowed per function
-    "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
-    "maxstatements" : false,    // {int} Max number statements per function
-    "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
-    "maxlen"        : false,    // {int} Max number of characters per line
-    "varstmt"       : false,    // true: Disallow any var statements. Only `let` and `const` are allowed.
-
-    // Relaxing
-    "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
-    "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
-    "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
-    "eqnull"        : false,     // true: Tolerate use of `== null`
-    "esversion"     : 5,         // {int} Specify the ECMAScript version to which the code must adhere.
-    "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
-                                 // (ex: `for each`, multiple try/catch, function expression…)
-    "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
-    "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
-    "funcscope"     : false,     // true: Tolerate defining variables inside control statements
-    "globalstrict"  : false,     // true: Allow global "use strict" (also enables 'strict')
-    "iterator"      : false,     // true: Tolerate using the `__iterator__` property
-    "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
-    "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
-    "laxcomma"      : false,     // true: Tolerate comma-first style coding
-    "loopfunc"      : false,     // true: Tolerate functions being defined in loops
-    "multistr"      : false,     // true: Tolerate multi-line strings
-    "noyield"       : false,     // true: Tolerate generator functions with no yield statement in them.
-    "notypeof"      : false,     // true: Tolerate invalid typeof operator values
-    "proto"         : false,     // true: Tolerate using the `__proto__` property
-    "scripturl"     : false,     // true: Tolerate script-targeted URLs
-    "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
-    "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
-    "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
-    "validthis"     : false,     // true: Tolerate using this in a non-constructor function
-
-    // Environments
-    "browser"       : true,     // Web Browser (window, document, etc)
-    "browserify"    : false,    // Browserify (node.js code in the browser)
-    "couch"         : false,    // CouchDB
-    "devel"         : true,     // Development/debugging (alert, confirm, etc)
-    "dojo"          : false,    // Dojo Toolkit
-    "jasmine"       : false,    // Jasmine
-    "jquery"        : false,    // jQuery
-    "mocha"         : true,     // Mocha
-    "mootools"      : false,    // MooTools
-    "node"          : true,    // Node.js
-    "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
-    "phantom"       : false,    // PhantomJS
-    "prototypejs"   : false,    // Prototype and Scriptaculous
-    "qunit"         : false,    // QUnit
-    "rhino"         : false,    // Rhino
-    "shelljs"       : false,    // ShellJS
-    "typed"         : false,    // Globals for typed array constructions
-    "worker"        : false,    // Web Workers
-    "wsh"           : false,    // Windows Scripting Host
-    "yui"           : false,    // Yahoo User Interface
-
-    // Custom Globals
-    "globals"       : {}        // additional predefined global variables
-}

AUTHORS

@@ -2,3 +2,4 @@ Andrea Condoluci <a.condoluci@phonicscore.com> (http://llliii.ooo)
 Oliver Hörbinger <o.hoerbinger@phonicscore.com> ()
 Matthias Uiberacker <m.uiberacker@phonicscore.com> ()
 Sebastian Haas <s.haas@phonicscore.com> (http://sebastianhaas.at)
+Benjamin Giesinger <benjamin.giesinger@gmail.com> (http://benjamingiesinger.de)

Gruntfile.js

@@ -1,192 +0,0 @@
-/*global module*/
-var webpackCfg = require('./webpack.config.js');
-
-module.exports = function (grunt) {
-    'use strict';
-
-    // The banner on top of the build
-    var banner = '/**\n' +
-        ' * Open Sheet Music Display <%= pkg.version %> built on <%= grunt.template.today("yyyy-mm-dd") %>.\n' +
-        ' * Copyright (c) 2016 PhonicScore\n' +
-        ' *\n' +
-        ' * https://github.com/opensheetmusicdisplay/opensheetmusicdisplay\n' +
-        ' */\n',
-        typings = [
-            'typings/index.d.ts',
-            // Additional manual typings:
-            'external/vexflow/vexflow.d.ts'
-        ];
-
-    // Paths
-    var src = ['src/**/*.ts'];
-    var test = ['test/**/*.ts'];
-
-    // Grunt configuration following:
-    grunt.initConfig({
-        pkg: grunt.file.readJSON('package.json'),
-        banner: '',
-        // Build output directories
-        outputDir: {
-            build: 'build',
-            dist: 'dist'
-        },
-        // Browserify
-        browserify: {
-            dist: {
-                src: ['src/OSMD/OSMD.ts'],
-                dest: '<%= outputDir.build %>/osmd.js',
-                options: {
-                    banner: '<%= banner %>',
-                    browserifyOptions: {
-                        standalone: 'opensheetmusicdisplay'
-                    }
-                }
-            },
-            debug: {
-                src: ['src/OSMD/OSMD.ts'],
-                dest: '<%= outputDir.build %>/osmd-debug.js',
-                options: {
-                    banner: '<%= banner %>',
-                    browserifyOptions: {
-                        debug: true,
-                        standalone: 'opensheetmusicdisplay'
-                    }
-                }
-            },
-            test: {
-                src: [].concat(typings, src, test),
-                dest: '<%= outputDir.build %>/osmd-test.js',
-                options: {
-                    banner: '<%= banner %>',
-                    browserifyOptions: {
-                        debug: true
-                    }
-                }
-            },
-            options: {
-                plugin: ['tsify']
-            }
-        },
-        // Uglify
-        uglify: {
-            options: {
-                compress: {
-                    'drop_console': true
-                },
-                banner: banner,
-                mangle: true,
-                mangleProperties: true
-            },
-            bundle: {
-                files: {
-                    'build/osmd.min.js': ['build/osmd.js']
-                }
-            }
-        },
-        // Webpack
-        webpack: {
-          options: {
-            progress: true,
-          },
-          build: webpackCfg,
-          dev: Object.assign({ watch: true }, webpackCfg)
-        },
-        'webpack-dev-server': {
-          options: {
-              webpack: webpackCfg
-          },
-          start: webpackCfg.devServer,
-        },
-        // Karma setup
-        karma: {
-            // For continuous integration
-            ci: {
-                configFile: 'karma.conf.js',
-                options: {
-                    browsers: ['PhantomJS']
-                }
-            },
-            firefox: {
-                configFile: 'karma.conf.js',
-                options: {
-                    singleRun: false,
-                    browsers: ['Firefox']
-                }
-            },
-            chrome: {
-                configFile: 'karma.conf.js',
-                options: {
-                    singleRun: false,
-                    browsers: ['Chrome']
-                }
-            }
-        },
-        // Typescript compilation for ES6 module (npm package)
-        ts: {
-          default : {
-            tsconfig: true
-          }
-        },
-        // Cleaning task setup
-        clean: {
-            options: {
-                force: true
-            },
-            all: {
-                src: [
-                    '<%= outputDir.build %>',
-                    '<%= outputDir.dist %>',
-                    '.tscache',
-                    'src/**/*.js', 'test/**/*.js' // if something went wrong, delete JS from TypeScript source directories
-                ]
-            }
-        },
-        copy: {
-            demo: {
-                files: [
-                    { src: ['*'], dest: '<%= outputDir.build %>/demo/sheets/', cwd: './test/data/', expand: true },
-                    { src: ['*.js', '*.css', '*.html', '*.ico'], cwd: './demo/', expand: true, dest: '<%= outputDir.build %>/demo/' },
-                    { src: ['osmd-debug.js'], cwd: './build/', expand: true, dest: '<%= outputDir.build %>/demo/' }
-                ]
-            }
-        },
-        // http-server
-        'http-server': {
-            'demo': {
-                root: 'build/demo',
-                port: 8000,
-                host: '0.0.0.0',
-                showDir : true,
-                autoIndex: true,
-                runInBackground: false,
-                openBrowser : true
-            }
-        }
-
-    });
-
-    // Load npm tasks
-    grunt.loadNpmTasks('grunt-browserify');
-    grunt.loadNpmTasks('grunt-contrib-clean');
-    grunt.loadNpmTasks('grunt-contrib-copy');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-http-server');
-    grunt.loadNpmTasks('grunt-karma');
-    grunt.loadNpmTasks('grunt-ts');
-    grunt.loadNpmTasks('grunt-webpack');
-
-    // Build tasks
-    grunt.registerTask('build:demo',  'Builds the demo.',                            ['browserify:debug', 'copy:demo']);
-    grunt.registerTask('build:test',  'Builds the tests',                            ['browserify:test']);
-    grunt.registerTask('build:dist',  'Builds for distribution on npm and Bower.',   ['browserify:dist', 'uglify', 'ts']);
-    grunt.registerTask('build:pack',  'Builds using webpack',                        ['webpack:build', 'uglify']);
-
-    // Tests
-    grunt.registerTask('test',        'Runs unit, regression and e2e tests.',        ['build:test', 'karma:ci']);
-
-    // Webpack dev server
-    grunt.registerTask('webpack-server', ['webpack-dev-server:start']);
-    // Default task (if grunt is run without any argument, used in contiuous integration)
-    grunt.registerTask('default',     'Default task, running all other tasks. (CI)', ['test', 'build:demo', 'build:dist']);
-};

README.md

@@ -1,15 +1,16 @@
-<img alt="OSMD logo" src="http://opensheetmusicdisplay.org/assets/osmd_logo.svg" width="200"/>
+<img alt="OSMD logo" src="https://opensheetmusicdisplay.org/assets/osmd_logo.svg" width="200"/>
 
 # OpenSheetMusicDisplay
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/opensheetmusicdisplay/opensheetmusicdisplay.svg)](https://greenkeeper.io/)
-[![Build Status](https://travis-ci.org/opensheetmusicdisplay/opensheetmusicdisplay.svg?branch=master)](https://travis-ci.org/opensheetmusicdisplay/opensheetmusicdisplay)
+[![Travis Build Status](https://travis-ci.org/opensheetmusicdisplay/opensheetmusicdisplay.svg?branch=master)](https://travis-ci.org/opensheetmusicdisplay/opensheetmusicdisplay)
+[![Appveyor Build status](https://ci.appveyor.com/api/projects/status/r88lnffso55nq1ko?svg=true)](https://ci.appveyor.com/project/sebastianhaas/opensheetmusicdisplay/branch/master)
 [![Dependency Status](https://david-dm.org/opensheetmusicdisplay/opensheetmusicdisplay.png)](https://david-dm.org/opensheetmusicdisplay/opensheetmusicdisplay)
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/opensheetmusicdisplay/opensheetmusicdisplay?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Code Climate](https://codeclimate.com/github/opensheetmusicdisplay/opensheetmusicdisplay/badges/gpa.svg)](https://codeclimate.com/github/opensheetmusicdisplay/opensheetmusicdisplay)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
-http://www.opensheetmusicdisplay.org/
+https://www.opensheetmusicdisplay.org/
 
 OpenSheeMusicDisplay is the missing link between MusicXML and VexFlow. Built upon many years of experience in both sheet music interactivity and engraving, it is the perfect solution for app developers seeking to build digital sheet music services.
 

bin/publish_gh_page.sh

@@ -2,7 +2,7 @@
 
 # Prepare files to be published
 npm run docs
-grunt build:demo
+npm run build
 
 # Clone github page
 git clone git@github.com:opensheetmusicdisplay/opensheetmusicdisplay.github.io.git

demo/index.html

@@ -3,65 +3,83 @@
 <head>
     <meta charset="utf-8">
 
-    <title>OpenSheetMusicDisplay Demo</title>
+    <title><%= htmlWebpackPlugin.options.title %></title>
     <meta name="description" content="A showcase for OpenSheetMusicDisplay.">
     <meta name="author" content="OpenSheetMusicDisplay contributors">
-
-    <!-- Include opensheetmusicdisplay -->
-    <!-- <script src="./osmd.js" type="text/javascript"></script> -->
-
-    <!-- Include code and styles for this demo -->
-    <script src="./demo.js" type="text/javascript"></script>
-    <link href="./demo.css" media="all" rel="stylesheet"/>
+    <!-- Demo js file is included automatically by webpack druing build -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js" type="text/javascript"></script>    
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.css" media="all" rel="stylesheet"/>
     <link rel="icon" href="./favicon.ico?" type="image/x-icon"/>
 </head>
 <body>
+<br>
+<h1 class="ui centered header">
+    <img src="./favicon.ico?" class="ui image">
+    <%= htmlWebpackPlugin.options.title %>
+</h1>
+<div class="ui three column grid container">
+    <div class="column">
+        <h3 class="ui header">Select a sample:</h3>
+        <select class="ui selection dropdown" style="width:100px"  id="select"></select>
+    </div>
+    <div class="column">
+        <h3 class="ui header">Render backend:</h3>
+        <select class="ui dropdown" id="backend-select" value="canvas">
+            <option value="canvas">Canvas</option>>
+            <option value="svg">SVG</option>
+        </select>
+    </div>
+    <div class="column">
+        <h3 class="ui header">Cursor controls:</h3>
+        <div class="ui buttons">
+            <div class="ui animated fade button" id="show-cursor-btn">
+                <div class="visible content">Show</div>
+                <div class="hidden content">
+                    <i class="eye icon"></i>
+                </div>
+            </div>
+            <div class="ui animated fade button" id="hide-cursor-btn">
+                <div class="visible content">Hide</div>
+                <div class="hidden content">
+                    <i class="eye slash icon"></i>
+                </div>
+            </div>
+            <div class="ui animated fade button" id="next-cursor-btn">
+                <div class="visible content">Next</div>
+                <div class="hidden content">
+                    <i class="arrow right icon"></i>
+                </div>
+            </div>
+            <div class="ui animated fade button" id="reset-cursor-btn">
+                <div class="visible content">Reset</div>
+                <div class="hidden content">
+                    <i class="undo icon"></i>
+                </div>
+            </div>
+        </div>
+    </div>         
+    <div class="column">
+        <h3 class="ui header">Zoom controls:</h3>
+        <div class="ui buttons">
+                <div class="ui button" id="zoom-in-btn">
+                    <i class="search plus icon"></i>
+                </div>
+                <div class="ui button" id="zoom-out-btn">
+                    <i class="search minus icon"></i>
+                </div>
+        </div>
+    </div>
+    <div class="column">
+        <h3 class="ui header">Zoom factor:</h3>
+        <h4 class="ui header" id="zoom-str">???</h4>
+    </div>
+    <div class="column">
+            <h3 class="ui header">Current width:</h3>                
+            <h4 class="ui header" id="size-str">???</h4>
+    </div>
+</div>
 <table cellspacing="0" style="max-width:700px;">
-    <tr>
-        <td>
-            <img src="./favicon.ico?" style="width:64px;height:64px;"/>
-        </td>
-        <td>
-            <h1>OpenSheetMusicDisplay Demo</h1>
-        </td>
-    </tr>
-</table>
-<table cellspacing="0" style="max-width:700px;">
-    <tr>
-        <td valign="top">
-            <select id="select"></select>
-            <p> Select a sample from the list ... </p>
-            <p>... or just drop your MusicXML file on this page.</p>
-        </td>
-        <td valign="top" halign="right">
-            <p>Renderer Backend
-                <select id="backend-select" value="canvas">
-                    <option value="canvas">Canvas</option>>
-                    <option value="svg">SVG</option>
-                </select>
-            <p>Cursor controls:
-                <input type="button" value="show" id="show-cursor-btn"/>
-                <input type="button" value="hide" id="hide-cursor-btn"/>
-                <input type="button" value="next" id="next-cursor-btn"/>
-                <input type="button" value="reset" id="reset-cursor-btn"/>
-            </p>
-            <p>
-                Zoom controls:
-                <input type="button" value="zoom in" id="zoom-in-btn"/>
-                <input type="button" value="zoom out" id="zoom-out-btn"/>
-            </p>
-            <table cellspacing="0">
-                <tr>
-                    <td>
-                        <p>Zoom factor: <span id="zoom-str">???</span>%</p>
-                    </td>
-                    <td>
-                        <p>Current width: <span id="size-str">???</span>px</p>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    </tr>
     <tr id="error-tr">
         <td></td>
         <td id="error-td"></td>

demo/index.js

@@ -5,7 +5,7 @@ import { OSMD } from '../src/OSMD/OSMD';
     "use strict";
     var osmdObj;
     // The folder of the demo files
-    var folder = "",
+    var folder = process.env.STATIC_FILES_SUBFOLDER ? process.env.STATIC_FILES_SUBFOLDER + "/" : "",
     // The available demos
         demos = {
             "Beethoven - AnDieFerneGeliebte": "Beethoven_AnDieFerneGeliebte.xml",
@@ -205,8 +205,8 @@ import { OSMD } from '../src/OSMD/OSMD';
     }
 
     function logCanvasSize() {
-        size.innerHTML = canvas.offsetWidth;
-        zoomDiv.innerHTML = Math.floor(zoom * 100.0);
+        size.innerHTML = canvas.offsetWidth + "px";
+        zoomDiv.innerHTML = Math.floor(zoom * 100.0) + "%";
     }
 
     function scale() {

karma.conf.js

@@ -1,8 +1,7 @@
-// Karma configuration
-// Generated on Fri Feb 05 2016 12:36:08 GMT+0100 (CET)
-/*globals module*/
+var common = require('./webpack.common.js')
+
 module.exports = function (config) {
-    'use strict';
+    'use strict'
     config.set({
         // base path that will be used to resolve all patterns (eg. files, exclude)
         basePath: '',
@@ -15,13 +14,11 @@ module.exports = function (config) {
         exclude: [],
 
         files: [{
-            pattern: 'build/osmd-test.js'
-        }, {
             pattern: 'src/**/*.ts',
             included: false
         }, {
             pattern: 'test/**/*.ts',
-            included: false
+            included: true
         }, {
             pattern: 'test/data/*.xml',
             included: true
@@ -39,7 +36,34 @@ module.exports = function (config) {
         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
         preprocessors: {
             'test/data/*.xml': ['xml2js'],
-            'test/data/*.mxl.base64': ['base64-to-js']
+            'test/data/*.mxl.base64': ['base64-to-js'],
+            // add webpack as preprocessor
+            'src/**/*.ts': ['webpack'],
+            'test/**/*.ts': ['webpack']
+        },
+
+        webpack: {
+            // karma watches the test entry points
+            // (you don't need to specify the entry option)
+            // webpack watches dependencies
+
+            // copy parts of webpack configuration to use minimal effort here
+            devtool: 'cheap-module-eval-source-map',
+            module: {
+                loaders: common.module.loaders
+            },
+            resolve: common.resolve
+        },
+        webpackMiddleware: {
+            // webpack-dev-middleware configuration
+            // i. e.
+            noInfo: true
+        },
+
+        // Required for Firefox and Chorme to work
+        // see https://github.com/webpack-contrib/karma-webpack/issues/188
+        mime: {
+            'text/x-typescript': ['ts', 'tsx']
         },
 
         // test results reporter to use
@@ -65,8 +89,16 @@ module.exports = function (config) {
         autoWatch: false,
 
         // start these browsers
-        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-        browsers: [], // Will be overruled by karma grunt task options
+        browsers: [process.env.CI ? 'ChromeHeadlessNoSandbox' : 'ChromeHeadless'],
+
+        // For security reasons, Google Chrome is unable to provide sandboxing
+        // when it is running in container-based environments (e.g. CI).
+        customLaunchers: {
+            ChromeHeadlessNoSandbox: {
+                base: 'ChromeHeadless',
+                flags: ['--no-sandbox']
+            }
+        },
 
         // Continuous Integration mode
         // if true, Karma captures browsers, runs the tests and exits
@@ -75,5 +107,5 @@ module.exports = function (config) {
         // Concurrency level
         // how many browser should be started simultaneous
         concurrency: Infinity
-    });
-};
+    })
+}

package.json

@@ -5,14 +5,18 @@
   "main": "dist/src/OSMD/OSMD.js",
   "typings": "dist/src/OSMD/OSMD",
   "scripts": {
-    "docs": "typedoc --mode file --out build/docs --module commonjs --target ES5 --name opensheetmusicdisplay ./src",
-    "lint": "npm run jshint && npm run tslint",
-    "jshint": "jshint . --exclude node_modules,dist,build,bin,demo",
-    "test": "npm run lint && grunt test",
+    "docs": "typedoc --out ./build/docs --name OpenSheetMusicDisplay --module commonjs --target ES5 --mode file ./src/**/*.ts",
+    "eslint": "eslint .",
     "tslint": "tslint --project tsconfig.json \"src/**/*.ts\" \"test/**/*.ts\"",
-    "typedoc": "typedoc --out ./build/docs --name OpenSheetMusicDisplay --module commonjs --target ES5 --mode file ./src/**/*.ts",
-    "prepublish": "grunt build:dist",
-    "start": "http-server build/demo"
+    "lint": "npm-run-all eslint tslint",
+    "test": "karma start --single-run --no-auto-watch",
+    "test:watch": "karma start --no-single-run --auto-watch --browsers Chrome",
+    "prepare": "npm run build",
+    "build": "npm-run-all lint build:webpack",
+    "build:doc": "cross-env STATIC_FILES_SUBFOLDER=sheets npm run build",
+    "build:webpack": "webpack --progress --colors --config webpack.prod.js",
+    "build:webpack-dev": "webpack --progress --colors --config webpack.dev.js",
+    "start": "webpack-dev-server --progress --colors --config webpack.dev.js"
   },
   "pre-commit": [
     "lint"
@@ -27,8 +31,7 @@
     "external",
     "demo",
     "tsconfig.json",
-    "tslint.json",
-    "Gruntfile.js"
+    "tslint.json"
   ],
   "repository": {
     "type": "git",
@@ -58,46 +61,44 @@
     "@types/chai": "^4.0.3",
     "@types/loglevel": "^1.4.29",
     "@types/mocha": "^2.2.40",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-es2015": "^6.24.1",
-    "browserify": "^16.1.0",
     "chai": "^4.1.0",
+    "clean-webpack-plugin": "^0.1.18",
+    "cross-env": "^5.1.3",
     "cz-conventional-changelog": "^2.0.0",
-    "grunt": "^1.0.1",
-    "grunt-browserify": "^5.0.0",
-    "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-uglify": "^3.0.0",
-    "grunt-contrib-watch": "^1.0.0",
-    "grunt-http-server": "",
-    "grunt-karma": "^2.0.0",
-    "grunt-ts": "^6.0.0-beta.3",
-    "grunt-webpack": "^3.0.0",
-    "grunt-webpack-server": "^0.1.0",
+    "eslint": "^4.18.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "file-loader": "^1.1.8",
+    "html-webpack-plugin": "^2.30.1",
     "http-server": "^0.11.0",
     "jquery": "^3.2.1",
-    "jshint": "^2.9.4",
-    "karma": "^1.1.1",
+    "karma": "^2.0.0",
     "karma-base64-to-js-preprocessor": "^0.0.1",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.0.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-firefox-launcher": "^1.0.0",
     "karma-mocha": "^1.1.1",
     "karma-mocha-reporter": "^2.0.4",
-    "karma-phantomjs-launcher": "^1.0.1",
+    "karma-webpack": "^2.0.9",
     "karma-xml2js-preprocessor": "^0.0.3",
-    "mocha": "^4.0.0",
-    "phantomjs-prebuilt": "^2.1.8",
+    "mocha": "^4.1.0",
+    "npm-run-all": "^4.1.2",
     "pre-commit": "^1.2.2",
     "ts-loader": "^3.0.0",
     "tsify": "^3.0.0",
     "tslint": "^5.8.0",
+    "tslint-loader": "^3.5.3",
     "typedoc": "^0.10.0",
     "typescript": "^2.6.1",
     "uglifyjs-webpack-plugin": "^1.0.1",
+    "underscore-template-loader": "^0.8.0",
     "webpack": "^3.5.5",
-    "webpack-dev-server": "2.7.1"
+    "webpack-dev-server": "2.7.1",
+    "webpack-merge": "^4.1.1",
+    "webpack-visualizer-plugin": "^0.1.11"
   },
   "config": {
     "commitizen": {

webpack.common.js

@@ -0,0 +1,75 @@
+var path = require('path')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var webpack = require('webpack')
+
+module.exports = {
+    entry: {
+        'osmd': './src/OSMD/OSMD.ts', // Main library
+        'demo': './demo/index.js' // Demo index
+    },
+    output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: '[name].js'
+    },
+    resolve: {
+        // Add '.ts' and '.tsx' as a resolvable extension.
+        extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
+    },
+    module: {
+        loaders: [
+            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
+            {
+                test: /\.ts$/,
+                loader: 'ts-loader',
+                exclude: /(node_modules|bower_components)/
+            },
+            // FIXME: TSLint loader is horribly slow therefore check only at beginning
+            // https://github.com/wbuchwalter/tslint-loader/issues/76
+            // // ts lint loader. will pre-lint the ts files
+            // {
+            //     test: /\.ts$/,
+            //     enforce: 'pre',
+            //     loader: 'tslint-loader',
+            //     options: {
+            //         typeCheck: true
+            //     }
+            // },
+            // For html loader generation
+            {
+                test: /\.html$/,
+                loader: 'underscore-template-loader'
+            },
+            {
+                test: /\.(jpg|jpeg|gif|png|ico)$/,
+                exclude: /node_modules/,
+                loader: 'file-loader?name=img/[path][name].[ext]&context=./app/images'
+            }
+        ]
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            jQuery: 'jquery'
+        }),
+        new webpack.EnvironmentPlugin({
+            STATIC_FILES_SUBFOLDER: false, // Set to other directory if NOT using webpack-dev-server
+            NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
+            DEBUG: false,
+            DRAW_BOUNDING_BOX_ELEMENT: false //  Specifies the element to draw bounding boxes for (e.g. 'GraphicalLabels'). If 'all', bounding boxes are drawn for all elements.
+        }),
+        // add a demo page to the build folder
+        new HtmlWebpackPlugin({
+            template: 'demo/index.html',
+            title: 'OpenSheetMusicDisplay Demo'
+        })
+    ],
+    devServer: {
+        contentBase: [
+            path.join(__dirname, 'test/data'),
+            path.join(__dirname, 'build'),
+            path.join(__dirname, 'demo')
+        ],
+        port: 8000,
+        compress: false
+    }
+}

webpack.config.js

@@ -1,63 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-
-module.exports = {
-  entry: {
-    'osmd': './src/OSMD/OSMD.ts', // Main library
-    'demo': './demo/index.js' // Demo index
-  },
-  output: {
-      path: path.resolve(__dirname, 'build'),
-      filename: '[name].js',
-   },
-   resolve: {
-       // Add '.ts' and '.tsx' as a resolvable extension.
-       extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
-   },
-   module: {
-       loaders: [
-           // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
-           { test: /\.tsx?$/, loader: 'ts-loader' },
-           // all files with a '.js' extension. Mostly for the web demo.
-           { test: /\.jsx?$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/,
-              query: {
-                presets: ['es2015'] 
-              }
-          },
-       ]
-   },
-   plugins: [
-     // build optimization plugins
-     new webpack.LoaderOptionsPlugin({
-      minimize: true,
-      debug: true
-    }),
-    new webpack.ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery'
-    }),
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
-      DEBUG: false,
-      DRAW_BOUNDING_BOX_ELEMENT: false, //  Specifies the element to draw bounding boxes for (e.g. 'GraphicalLabels'). If 'all', bounding boxes are drawn for all elements.
-    }),
-    // FIXME: use environment variable to control uglify.
-    // new webpack.optimize.UglifyJsPlugin({
-    //     warnings: false,
-    //     beautify: false,
-    //     compress: true,
-    //     comments: false,
-    //     sourceMap: true
-    //   })
-  ],
-  devServer: {
-    contentBase: [
-      path.join(__dirname, 'test/data'),
-      path.join(__dirname, 'build'),
-      path.join(__dirname, 'demo')
-      // TODO: fill in paths for demo data
-    ],
-    port: 8000,
-    compress: false,
-  },
-};

webpack.dev.js

@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+    devtool: process.env.DEBUG ? false : 'cheap-eval-source-map'
+})

webpack.prod.js

@@ -0,0 +1,38 @@
+var merge = require('webpack-merge')
+var webpack = require('webpack')
+var path = require('path')
+var common = require('./webpack.common.js')
+var Visualizer = require('webpack-visualizer-plugin')
+var Cleaner = require('clean-webpack-plugin')
+
+var pathsToClean = [
+    'dist/**',
+    'build/**'
+]
+
+module.exports = merge(common, {
+    output: {
+        filename: '[name].min.js',
+        path: path.resolve(__dirname, 'build')
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            warnings: false,
+            beautify: false,
+            compress: true,
+            comments: false,
+            sourceMap: true,
+            parallel: true
+        }),
+        // build optimization plugins
+        new webpack.LoaderOptionsPlugin({
+            minimize: true,
+            debug: true
+        }),
+        new Visualizer({
+            path: path.resolve(__dirname, 'build'),
+            filename: './statistics.html'
+        }),
+        new Cleaner(pathsToClean, {verbose: true, dry: false})
+    ]
+})