Fix : remove cache issues for css, js, templates

Packaged css and js are now suffixed with the build date.
All templates are exported to a folder named after the build date.
Streamlined the build process to copy files to piskel-website.

Isolated common part between piskel and piskel-website in a separated
template, which is now completely created by the grunt build of piskel.

Added a windows CMD script to copy the static resources to piskel-website.

Gruntfile.js

@@ -13,6 +13,10 @@
 var SOURCE_FOLDER = "src";
 
 module.exports = function(grunt) {
+  var dateFormat = require('dateformat');
+  var now = new Date();
+  var version = '-' + dateFormat(now, "yyyy-mm-dd-hh-MM");
+
   var mapToSrcFolder = function (path) {return [SOURCE_FOLDER, path].join('/');};
 
   var piskelScripts = require('./src/piskel-script-list.js').scripts.map(mapToSrcFolder);
@@ -110,11 +114,11 @@ module.exports = function(grunt) {
           separator : ';'
         },
         src : piskelScripts,
-        dest : 'dest/js/piskel-packaged.js'
+        dest : 'dest/js/piskel-packaged' + version + '.js'
       },
       css : {
         src : piskelStyles,
-        dest : 'dest/css/piskel-style-packaged.css'
+        dest : 'dest/css/piskel-style-packaged' + version + '.css'
       }
     },
     uglify : {
@@ -123,19 +127,72 @@ module.exports = function(grunt) {
       },
       my_target : {
         files : {
-          'dest/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged.js']
+          'dest/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged' + version + '.js']
         }
       }
     },
+    replace: {
+      main: {
+        options: {
+          patterns: [
+            {
+              match: 'version',
+              replacement: version
+            }
+          ]
+        },
+        files: [
+          {expand: true, flatten: true, src: ['src/piskel-boot.js'], dest: 'dest/'}
+        ]
+      },
+      index: {
+        options: {
+          patterns: [
+            {
+              match: /templates\//g,
+              replacement: "templates"+version+"/"
+            }
+          ]
+        },
+        files: [
+          {src: ['src/index.html'], dest: 'dest/index.html'}
+        ]
+      },
+      editor: {
+        options: {
+          patterns: [
+            {
+              match: /templates\//g,
+              replacement: "../templates"+version+"/"
+            },{
+              match: /^(.|[\r\n])*<!--body-main-start-->/,
+              replacement: "",
+              description : "Remove everything before body-main-start comment"
+            },{
+              match: /<!--body-main-end-->(.|[\r\n])*$/,
+              replacement: "",
+              description : "Remove everything after body-main-end comment"
+            },{
+              match: /([\r\n])  /g,
+              replacement: "$1",
+              description : "Decrease indentation by one"
+            }
+          ]
+        },
+        files: [
+          {src: ['src/index.html'], dest: 'dest/piskelapp-partials/main-partial.html'}
+        ]
+      }
+    },
     copy: {
       main: {
         files: [
-          {src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot.js'},
+          {src: ['dest/js/piskel-packaged-min.js'], dest: 'dest/js/piskel-packaged-min' + version + '.js'},
           {src: ['src/logo.png'], dest: 'dest/logo.png'},
           {src: ['src/js/lib/iframeLoader.js'], dest: 'dest/js/lib/iframeLoader.js'},
           {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
           {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
-          {expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
+          {expand: true, src: ['**/*.html'], cwd: 'src/templates/', dest: 'dest/templates' + version + '/', filter: 'isFile'}
         ]
       }
     },
@@ -223,6 +280,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-express');
+  grunt.loadNpmTasks('grunt-replace');
   grunt.loadNpmTasks('grunt-ghost');
   grunt.loadNpmTasks('grunt-open');
   grunt.loadNpmTasks('grunt-leading-indent');
@@ -241,7 +299,9 @@ module.exports = function(grunt) {
   // Compile JS code (eg verify JSDoc annotation and types, no actual minified code generated).
   grunt.registerTask('compile', ['closureCompiler:compile', 'clean:after']);
 
-  grunt.registerTask('merge',  ['concat:js', 'concat:css', 'uglify', 'copy']);
+  grunt.registerTask('rep', ['replace:main', 'replace:index', 'replace:editor']);
+
+  grunt.registerTask('merge',  ['concat:js', 'concat:css', 'uglify', 'rep', 'copy']);
 
   // Validate & Build
   grunt.registerTask('default', ['clean:before', 'lint', 'compile', 'merge']);

misc/scripts/copy-to-piskel-website.cmd

@@ -0,0 +1,21 @@
+@ECHO off
+
+SETLOCAL
+
+  SET PISKEL_PATH="C:\Development\git\piskel"
+  SET PISKELAPP_PATH="C:\Development\git\piskel-website"
+
+  ECHO "Copying files to piskelapp"
+  XCOPY "%PISKEL_PATH%\dest" "%PISKELAPP_PATH%\static\editor" /e /i /h /y
+
+  ECHO "Delete previous partial"
+  DEL "%PISKELAPP_PATH%\templates\editor\main-partial.html"
+  ECHO "Copy new partial"
+  MOVE "%PISKELAPP_PATH%\static\editor\piskelapp-partials\main-partial.html" "%PISKELAPP_PATH%\templates\editor"
+  ECHO "Delete temp partial"
+  RMDIR "%PISKELAPP_PATH%\static\editor\piskelapp-partials\" /S /Q
+
+  PAUSE
+  explorer "%PISKELAPP_PATH%\"
+
+ENDLOCAL

package.json

@@ -23,12 +23,14 @@
     "grunt-contrib-uglify": "0.2.2",
     "grunt-contrib-watch": "0.6.1",
     "grunt-express": "1.0",
+    "grunt-replace": "0.7.8",
     "grunt-ghost": "1.0.12",
     "grunt-open": "0.2.3",
     "grunt-leading-indent": "0.1.0",
     "grunt-closure-tools": "~0.8.3",
     "grunt-node-webkit-builder": "0.1.19",
-    "nodewebkit": "0.8.4"
+    "nodewebkit": "0.8.4",
+    "dateformat" : "1.0.8-1.2.3"
   },
   "window": {
     "title": "Piskel",

src/index.html

@@ -23,6 +23,10 @@
       <span style="top:45%">Loading Piskel ...</span>
   </div>
   <script type="text/javascript" src="js/lib/iframeLoader.js"></script>
+
+  <!-- the comment below indicates the beginning of markup reused by the editor integrated in piskelapp.com -->
+  <!-- do not delete, do not move :) -->
+  <!--body-main-start-->
   <div id="main-wrapper" class="main-wrapper">
     <iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
 
@@ -70,6 +74,10 @@
   </div>
 
   <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+  <!--body-main-end-->
+  <!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
+  <!-- do not delete, do not move :) -->
+
   <script type="text/javascript" src="piskel-boot.js"></script>
 </body>
 </html>

src/js/lib/iframeLoader.js

@@ -37,11 +37,7 @@
   var storeFrame = function (iframe) {
     var script=document.createElement("script");
     script.setAttribute("type", "text/html");
-    if (window.pskl && window.pskl.appEngineToken_) {
-      script.setAttribute("id", iframe.getAttribute("src").replace('../',''));
-    } else {
-      script.setAttribute("id", iframe.getAttribute("src"));
-    }
+    script.setAttribute("id", iframe.getAttribute("src").replace(/.*templates[^\/]*\//,'templates/'));
     script.innerHTML = iframe.contentWindow.document.body.innerHTML;
     iframe.parentNode.removeChild(iframe);
     document.body.appendChild(script);
@@ -52,5 +48,5 @@
       var iframe = event.target || event.srcElement;
       processFrame(iframe);
     }
-  }
+  };
 })();

src/piskel-boot.js

@@ -1,9 +1,15 @@
 (function () {
 
+  var version = '@@version';
+  var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
+  if (versionHasNotBeenReplaced)  {
+    version = '';
+  }
+
   window.onPiskelReady = function () {
     var loadingMask = document.getElementById('loading-mask');
     loadingMask.style.opacity = 0;
-    window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600)
+    window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
     pskl.app.init();
     // cleanup
     delete window.pskl_exports;
@@ -36,18 +42,18 @@
     document.head.appendChild(link);
   };
 
-  if (window.location.href.indexOf("debug") != -1) {
+  if (window.location.href.indexOf('debug') != -1) {
     window.pskl_exports = {};
     var scriptIndex = 0;
     window.loadNextScript = function () {
       if (scriptIndex == window.pskl_exports.scripts.length) {
         window.onPiskelReady();
       } else {
-        loadScript(window.pskl_exports.scripts[scriptIndex], "loadNextScript()");
+        loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
         scriptIndex ++;
       }
     };
-    loadScript("piskel-script-list.js", "loadNextScript()");
+    loadScript('piskel-script-list.js', 'loadNextScript()');
 
     window.loadStyles = function () {
       var styles = window.pskl_exports.styles;
@@ -55,22 +61,22 @@
         loadStyle(styles[i]);
       }
     };
-    loadScript("piskel-style-list.js", "loadStyles()");
+    loadScript('piskel-style-list.js', 'loadStyles()');
   } else {
     var script;
-    if (window.location.href.indexOf("pack") != -1) {
-      script = "js/piskel-packaged.js";
+    if (window.location.href.indexOf('pack') != -1) {
+      script = 'js/piskel-packaged' + version + '.js';
     } else {
-      script = "js/piskel-packaged-min.js";
+      script = 'js/piskel-packaged-min' + version + '.js';
     }
-    loadStyle('css/piskel-style-packaged.css');
+    loadStyle('css/piskel-style-packaged' + version + '.css');
 
     var loaderInterval = window.setInterval(function () {
-      if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
+      if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
         window.clearInterval(loaderInterval);
-        loadScript(script, "onPiskelReady()");
+        loadScript(script, 'onPiskelReady()');
       } else {
-        console.log("waiting for templates to load ....");
+        window.console.log('waiting for templates to load ....');
       }
     }, 100);
   }