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.
This commit is contained in:
jdescottes
parent
84e757768e
commit
8f5ead43d9
6 changed files with 118 additions and 25 deletions
72
Gruntfile.js
72
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']);
|
||||
|
|
|
|||
21
misc/scripts/copy-to-piskel-website.cmd
Normal file
21
misc/scripts/copy-to-piskel-website.cmd
Normal file
|
|
@ -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
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue