Merge pull request #54 from opensheetmusicdisplay/feature/publishDemo

Deploy demo application / Grunt restructuring

.travis.yml

@@ -16,4 +16,4 @@ deploy:
     branch: master
     repo: opensheetmusicdisplay/opensheetmusicdisplay
 after_deploy:
-  - ./bin/publish_docs.sh
+  - ./bin/publish_gh_page.sh

Gruntfile.js

@@ -1,6 +1,7 @@
 /*global module*/
 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' +
@@ -12,11 +13,11 @@ module.exports = function (grunt) {
             'typings/index.d.ts',
             // Additional manual typings:
             'external/vexflow/vexflow.d.ts'
-            // 'typings/fft.d.ts'
-        ],
+        ];
+
     // Paths
-        src = ['src/**/*.ts'],
-        test = ['test/**/*.ts'];
+    var src = ['src/**/*.ts'];
+    var test = ['test/**/*.ts'];
 
     // Grunt configuration following:
     grunt.initConfig({
@@ -38,7 +39,7 @@ module.exports = function (grunt) {
             },
             demo: {
                 src: [].concat(typings, src, ['demo/inject.ts']),
-                dest: '<%= outputDir.build %>/osmd-demo.js',
+                dest: '<%= outputDir.build %>/demo/osmd-demo.js',
                 options: {
                     banner: "<%= banner %>",
                     browserifyOptions: {
@@ -86,14 +87,14 @@ module.exports = function (grunt) {
                     browsers: ['PhantomJS']
                 }
             },
-            debugWithFirefox: {
+            firefox: {
                 configFile: 'karma.conf.js',
                 options: {
                     singleRun: false,
                     browsers: ['Firefox']
                 }
             },
-            debugWithChrome: {
+            chrome: {
                 configFile: 'karma.conf.js',
                 options: {
                     singleRun: false,
@@ -113,8 +114,7 @@ module.exports = function (grunt) {
         // JsHint setup
         jshint: {
             all: [
-                'Gruntfile.js', 'karma.conf.js',
-                'submodules/**/*.json', 'submodules/**/*.js'
+                'Gruntfile.js', 'karma.conf.js', 'demo/**/*.js'
             ]
         },
         // TypeScript Type Definitions
@@ -126,7 +126,7 @@ module.exports = function (grunt) {
             build: {
                 options: {
                     module: 'commonjs',
-                    out: './build/docs',
+                    out: '<%= outputDir.build %>/docs',
                     name: 'opensheetmusicdisplay',
                     target: 'es5',
                     mode: 'file'
@@ -134,6 +134,12 @@ module.exports = function (grunt) {
                 src: ['./src/**/*.ts', './external/**/*.ts', './typings/**/*.ts']
             }
         },
+        // Typescript compilation for ES6 module (npm package)
+        ts: {
+          default : {
+            tsconfig: true
+          }
+        },
         // Cleaning task setup
         clean: {
             options: {
@@ -143,61 +149,62 @@ module.exports = function (grunt) {
                 src: [
                     '<%= outputDir.build %>',
                     '<%= outputDir.dist %>',
-                    // 'node_modules',
-                    // 'typings',
                     '.tscache',
-                    'src/**/*.js', 'test/**/*.js'
+                    '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'], cwd: './demo/', expand: true, dest: '<%= outputDir.build %>/demo/' }
                 ]
             }
         },
         // http-server
         'http-server': {
             'demo': {
-                root: '.',
+                root: 'build/demo',
                 port: 8000,
                 host: '0.0.0.0',
                 showDir : true,
                 autoIndex: true,
-                // server default file extension
-                // ext: 'html',
                 runInBackground: false,
-                openBrowser : true,
-                // customize url to serve specific pages
-                customPages: {
-                    '/': 'demo/demo.html'
-                }
+                openBrowser : true
             }
         }
 
     });
 
-    // Load Npm tasks
-    grunt.loadNpmTasks('grunt-karma');
-    grunt.loadNpmTasks('grunt-tslint');
-    grunt.loadNpmTasks('grunt-typings');
+    // Load npm tasks
     grunt.loadNpmTasks('grunt-browserify');
     grunt.loadNpmTasks('grunt-contrib-clean');
-    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-contrib-jshint');
     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-tslint');
     grunt.loadNpmTasks('grunt-typedoc');
+    grunt.loadNpmTasks('grunt-typings');
+
+    // Code quality
+    grunt.registerTask('lint',        'Lints all JavaScript and TypeScript files.',  ['jshint', 'tslint']);
+
+    // Documentation
+    grunt.registerTask('docs',        'Builds class documentation to /build/docs',   ['typedoc']);
+
+    // Build tasks
+    grunt.registerTask('build:demo',  'Builds the demo.',                            ['browserify:demo', 'copy:demo']);
+    grunt.registerTask('build:test',  'Builds the tests',                            ['browserify:debug']);
+    grunt.registerTask('build:dist',  'Builds for distribution on npm and Bower.',   ['browserify:dist', 'uglify', 'ts']);
 
-    // Register tasks
-    grunt.registerTask('lint',      ['jshint', 'tslint']);
-    grunt.registerTask('start',     ['typings']);
-    grunt.registerTask('all',       ['typings', 'default']);
-    grunt.registerTask('default',   ['browserify', 'uglify']);
-    grunt.registerTask('npm-test',  ['typings', 'test']);
-    grunt.registerTask('docs',      ['typedoc']);
-    grunt.registerTask('test',      ['browserify:debug', 'lint', 'karma:ci']);
-    grunt.registerTask('fast-test', ['browserify:debug', 'karma:ci']);
-    grunt.registerTask('rebuild',   ['clean', 'default']);
-    grunt.registerTask('publish',   ['clean', 'typings', 'browserify:dist', 'uglify:bundle', 'docs']);
-    grunt.registerTask('debug-build', ['browserify:demo']);
-    grunt.registerTask('debug-browser', ['http-server:demo']);
+    // Tests
+    grunt.registerTask('test',        'Runs unit, regression and e2e tests.',        ['build:test', 'karma:ci']);
 
-    // Fix these in the future:
-    // grunt.registerTask('test debug Firefox', ['browserify:debug', 'karma:debugWithFirefox']);
-    // grunt.registerTask('test debug Chrome', ['browserify:debug', 'karma:debugWithChrome']);
+    // Default task (if grunt is run without any argument, used in contiuous integration)
+    grunt.registerTask('default',     'Default task, running all other tasks. (CI)', ['lint', 'test', 'docs', 'build:demo', 'build:dist']);
 };

bin/publish_docs.sh

@@ -1,15 +0,0 @@
-#!/bin/bash
-
-grunt docs
-git clone git@github.com:opensheetmusicdisplay/opensheetmusicdisplay.github.io.git
-cd opensheetmusicdisplay.github.io
-git status
-rsync -a ../build/docs/* ./
-git status
-git add *
-git commit -m "Pushed auto-generated class documentation for $TRAVIS_TAG"
-git tag -a $TRAVIS_TAG -m "Class documentation for $TRAVIS_TAG"
-git push origin master --follow-tags
-echo "Deployed class documentation for $TRAVIS_TAG successfully."
-cd ..
-rm -rf opensheetmusicdisplay.github.io

bin/publish_gh_page.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Prepare files to be published
+grunt docs
+grunt build:demo
+
+# Clone github page
+git clone git@github.com:opensheetmusicdisplay/opensheetmusicdisplay.github.io.git
+cd opensheetmusicdisplay.github.io
+git status
+
+# Copy class documentation
+rsync -a ../build/docs/* ./
+
+# Copy demo application
+rsync -a ../build/demo/* ./demo
+
+# Commit and push changes
+git status
+git add *
+git commit -m "Pushed auto-generated class documentation and demo for $TRAVIS_TAG"
+git tag -a $TRAVIS_TAG -m "Class documentation and demo for $TRAVIS_TAG"
+git push origin master --follow-tags
+echo "Deployed class documentation and demo for $TRAVIS_TAG successfully."
+cd ..
+rm -rf opensheetmusicdisplay.github.io

demo/demo.js

@@ -4,7 +4,7 @@
     // The MusicSheet object
     var sheet,
     // The folder of the demo files
-        folder = "/test/data/",
+        folder = "sheets/",
     // The available demos
         demos = {
             "M. Clementi - Sonatina Op.36 No.1 Pt.1": "MuzioClementi_SonatinaOpus36No1_Part1",
@@ -16,7 +16,6 @@
             "C. Gounod - Meditation": "CharlesGounod_Meditation",
             "J.S. Bach - Praeludium In C Dur BWV846 1": "JohannSebastianBach_PraeludiumInCDur_BWV846_1",
             "J. Haydn - Concertante Cello": "JosephHaydn_ConcertanteCello",
-            "P. Koen - Fugue in G Major": "PeterKoen-FugueInGMajor",
             "S. Joplin - Elite Syncopations": "ScottJoplin_EliteSyncopations",
             "S. Joplin - The Entertainer": "ScottJoplin_The_Entertainer"
         },

demo/demo.html → demo/index.html

@@ -1,13 +1,21 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
   <head>
-    <title>OSMD Demo</title>
-    <script src="/build/osmd-demo.js"></script>
-    <script src="/demo/demo.js"></script>
-    <link href="/demo/demo.css" media="all" rel="stylesheet" />
+    <meta charset="utf-8">
+
+    <title>OpenSheetMusicDisplay Demo</title>
+    <meta name="description" content="A showcase for OpenSheetMusicDisplay.">
+    <meta name="author" content="OpenSheetMusicDisplay contributors">
+
+    <!-- Include opensheetmusicdisplay -->
+    <script src="osmd-demo.js"></script>
+
+    <!-- Include code and styles for this demo -->
+    <script src="demo.js"></script>
+    <link href="demo.css" media="all" rel="stylesheet" />
   </head>
   <body>
-    <h1>Open Sheet Music Display Demo</h1>
+    <h1>OpenSheetMusicDisplay Demo</h1>
     <table cellspacing="0">
       <tr>
         <td class="bignum">1</td>
@@ -16,7 +24,7 @@
             Select a sample from the list below...
           </p>
           <select id="select"></select>
-          <p>... or just drag'n'drop your MusicXML file on this page.</p>
+          <p>... or just drop your MusicXML file on this page.</p>
         </td>
       </tr>
       <tr>

package.json

@@ -5,9 +5,9 @@
   "main": "dist/src/OSMD/OSMD.js",
   "typings": "dist/src/OSMD/OSMD",
   "scripts": {
-    "test": "grunt npm-test",
-    "postinstall": "typings install",
-    "prepublish": "tsc && grunt publish"
+    "test": "grunt test",
+    "postinstall": "grunt typings",
+    "prepublish": "grunt build:dist"
   },
   "files": [
     "dist",
@@ -51,11 +51,13 @@
     "grunt": "^1.0.1",
     "grunt-browserify": "^5.0.0",
     "grunt-contrib-clean": "^1.0.0",
+    "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-jshint": "^1.0.0",
     "grunt-contrib-uglify": "^2.0.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-http-server": "",
     "grunt-karma": "^2.0.0",
+    "grunt-ts": "^6.0.0-beta.3",
     "grunt-tslint": "^3.1.1",
     "grunt-typedoc": "^0.2.4",
     "grunt-typings": "^0.1.5",