From 8f5ead43d9fc29dd9d55c66e3eaed388bf6795db Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 6 Jul 2014 16:17:14 +0200 Subject: [PATCH] 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 | 72 ++++++++++++++++++++++--- misc/scripts/copy-to-piskel-website.cmd | 21 ++++++++ package.json | 4 +- src/index.html | 8 +++ src/js/lib/iframeLoader.js | 8 +-- src/piskel-boot.js | 30 ++++++----- 6 files changed, 118 insertions(+), 25 deletions(-) create mode 100644 misc/scripts/copy-to-piskel-website.cmd diff --git a/Gruntfile.js b/Gruntfile.js index ffb677e..bea982c 100644 --- a/Gruntfile.js +++ b/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])*/, + replacement: "", + description : "Remove everything before body-main-start comment" + },{ + match: /(.|[\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']); diff --git a/misc/scripts/copy-to-piskel-website.cmd b/misc/scripts/copy-to-piskel-website.cmd new file mode 100644 index 0000000..e8480ad --- /dev/null +++ b/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 \ No newline at end of file diff --git a/package.json b/package.json index d007f45..5e24da0 100644 --- a/package.json +++ b/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", diff --git a/src/index.html b/src/index.html index f0bb2a6..27e92d3 100644 --- a/src/index.html +++ b/src/index.html @@ -23,6 +23,10 @@ Loading Piskel ... + + + +
@@ -70,6 +74,10 @@
+ + + + diff --git a/src/js/lib/iframeLoader.js b/src/js/lib/iframeLoader.js index b2cb5ad..645a7f6 100644 --- a/src/js/lib/iframeLoader.js +++ b/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); } - } + }; })(); \ No newline at end of file diff --git a/src/piskel-boot.js b/src/piskel-boot.js index b933517..a07ed84 100644 --- a/src/piskel-boot.js +++ b/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); }