How to use RPG.JS - javascript

I'm trying to work with this library (RPG.js) because it looks very powerfull, I looked at the official tutorial but i don't understand a lot of things, State 4 : "Initialize the canvas in your JS file :", whitch one ?
Is any one already used this library or know an other powerfull ?
Thanks for all.

Well, actually it was not so simple; I struggled I bit until I got a minimal functional game. What I did was not the "optimal" approach, but at least worked for me (I was using Mozilla Firefox in a Windows 7 OS). If someone knows how to improve what I did, I would be happy to know (since I'm a newbie in this library too), but since I was not able to find a good a simple starter tutorial in the net, I want to share what I did, in the hope I can help someone.
Before anything, create a HTML file, and call the libs inside the <head> tag:
<script src="canvasengine-X.Y.Z.all.min.js"></script>
<script src="rpgjs-X.Y.Z.min.js"></script>
And the canvas inside the <body> tag:
<canvas id="canvas_id" width="640" height="480"></canvas>
There's a 'sample' folder inside the github project (see https://github.com/RSamaium/RPG-JS), and inside this folder there is a functional game, and you can open it in the browser by the file quick.html. The idea is that if the sample game can work, then you can make your game work too, so I started trying to use the same graphics, data etc. of the sample.
First, you need to create in the root of your project the following folders and subfolders:
core
core\scene
Data
Data\Maps
Graphics
To have a minimal functional game, you need 1) a map to walk with your character, and 2) a character to control. So, you need to have graphics for some tiles to build your map and the walking model for your character. Create the subfolders below:
Graphics\Characters
Graphics\Tilesets
Graphics\Windowskins
And then copy the following files from the corresponding sample subfolder to these folders you created:
Graphics\Characters\event1.png
Graphics\Tilesets\tileset.png
Graphics\Windowskins\window.png #this file will be necessary for some of the js files below, even if not used; to remove this necessity, you'll need to edit these files - not what we want to do in the start.
In the 'core/scene' folder, you'll have some js files to load scenes (like the scene of your walking in the map, the gameover scene). I needed to copy all the js files inside the corresponding folder in the 'sample' project to the 'core/scene' folder of your game. This folder is not inside the 'sample' folder, but in the root of the github project. I only got my game working when I added all the 7 js files (without some work inside the codes you can remove the scenes you don't want, but since what we want is just to be able to run a simple game, let's copy them for now):
Scene_Gameover.js
Scene_Generated.js
Scene_Load.js
Scene_Map.js
Scene_Menu.js
Scene_Title.js
Scene_Window.js
Now, I added the following code inside a <script> tag on the html. This is more or less the same that was in the documentation. These codes will create an "actor" (a character), a "map", and the tiles you'll use in the map
For more details on maps or tiles, you should read the documentation (the same you linked in your question).
RPGJS.Materials = {
"characters": {
"1": "event1.png"
},
"tilesets": {
"1": "tileset.png"
}
};
RPGJS.Database = {
"actors": {
"1": {
"graphic": "1"
}
},
"tilesets": {
"1": {
"graphic": "1"
}
},
"map_infos": {
"1": {
"tileset_id": "1"
}
}
};
RPGJS.defines({
canvas: "canvas_id",
autoload: false
}).ready(function() {
RPGJS.Player.init({
actor: 1,
start: {x: 10, y: 10, id: 1} // Here, map id doesn't exist
});
RPGJS.Scene.map();
Lastly, create the json file setting every tile of your map. I just copied the MAP-1.json file from the 'sample' folder to inside the Data\Maps folder.
Then you'll be able to walk with your character in an empty map! Open the html file in your browser and try it!
Printscreen from the game running in a browser
Of course to have a real game you'll need to change a lot of this (as creating a database.json file and a materials.json file where you'll put most of the code you put in the <script> tag), but with the basics I hope you can work from that!

The tutorial is very clear
3. Add this code in your page :
<!DOCTYPE html>
<script src="canvasengine-X.Y.Z.all.min.js"></script>
<script src="rpgjs-X.Y.Z.min.js"></script>
<canvas id="canvas_id" width="640" height="480"></canvas>
That's "the canvas" ^

Brian Hellekin post a great tutorial. If you want see all the power of this library you must modify your html file in this way:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="http://canvasengine.net/cdn/dev/canvasengine-latest.all.min.js"></script>
<script src="http://rpgjs.com/cdn/rpgjs-2.0.0.min.js"></script>
<script src="plugins/gamepad.js"></script>
<script src="plugins/virtualjoystick.js"></script>
<script src="plugins/soundmanager2-jsmin.js"></script>
<script>
var Data = null;
if (Data) {
Data.database._scenes = Data.menus;
Data.database.system = Data.settings;
}
RPGJS.defines({
canvas: "canvas",
plugins: ["/rpgjs/plugins/Hub", "/rpgjs/plugins/Arpg", "/rpgjs/plugins/MenuGenerated"],
scene_path: "/rpgjs/",
soundmanager: {
url: "/rpgjs/swf/",
},
autoload: Data == null,
ignoreLoadError: true
}).ready(function(rpg) {
var material_json = {};
var m, type;
if (Data) {
for (var i in Data.materials) {
m = Data.materials[i];
type = m['type'] + "s";
if (!material_json[type]) {
material_json[type] = {};
}
material_json[type][m['material_id']] = RPGJS_Canvas.Materials.getFilename(m['path'], true);
}
var m, e;
var map_info = Data.maps, info;
for (var id in Data.data_maps) {
m = Data.data_maps[id];
this.setMap(id, m.map.map);
info = map_info[id];
info.tileset_id = info.tileset;
info.autotiles_id = info.autotiles;
info.events = [];
info.dynamic_event = [];
for (var i=0 ; i < m.events.length ; i++) {
e = m.events[i];
if (e.data_event.type == "event" ) {
var format =
[
{
"id" : e.event_id,
"x" : e.position_x,
"y" : e.position_y,
"name" : 'EV-' + e.event_id
},
e.data_event.data.pages
];
this.setEvent(id, 'EV-' + e.event_id, format);
info.events.push('EV-' + e.event_id);
}
else {
var name, _id;
for(var key in e.data_event.data) {
_id = e.data_event.data[key];
name = key;
break;
}
info.dynamic_event.push({
"x" : e.position_x,
"y" : e.position_y,
"name" : name,
"id" : _id
});
}
}
}
Data.database.map_infos = map_info;
global.materials = material_json;
global.data = Data.database;
global.game_player.init();
}
var scene = this.scene.call("Scene_Title", {
overlay: true
});
scene.zIndex(0);
});
</script>
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
background: black;
}
canvas {
-webkit-user-select : none;
-moz-user-select : none;
overflow : hidden;
}
#font-face{
font-family : "RPG";
src : url("Graphics/Fonts/Philosopher-Regular.ttf");
}
#font-face{
font-family : "Megadeth";
src : url("Graphics/Fonts/Elementary_Gothic_Bookhand.ttf");
}
</style>
<div id="game">
<canvas id="canvas" width="640" height="480"></canvas>
</div>
Note:
/rpgjs/ is the folder where i put my project in my local server. For play the game i go to http://localhost/rpgjs/
For work you need to modify the JS file in /plugins/ directory.
/Hub/Sprite_Hub.js
use this path:
array.push(RPGJS.Path.getFile("pictures", "../Pictures/hub.png", "hub"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/hp_meter.png", "hp_meter"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/hp_number.png", "hp_number"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/Hero_Face.png", "hero_face"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/button_A.png", "button_a"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/button_B.png", "button_b"));
is very useful debug in the first time with developer tool of google chrome. When you see 404 error on a img resourse just go to your project and search the file name. Find what js script load it and fix path.
And not...the tutorial inside library project is not clear and isn't complete...they just want sell his rpgeditor and js library is put only for promotion purpose i think.
you can see here: http://rpgworld.altervista.org/rpgjs/ my final working project. Is just a try... but you can see the power of this library.
this demo load:
1- a welcome page with new and load came
2- a custom map with one event
3- a working event: a chest that if you open you will find 30 gold
4- a player manu: just click ESC button on keyboard
i don't know how use arpg plugin for a realtime combat event but i working on for understand of to use it.

Related

Autodesk Forge: Loading PDF does not trigger onItemLoadSuccess

We have an application running that currently works with both 3D and 2D files, and do not experience any issues when loading 3D files and DWG.
But when trying to load a PDF neither my "onItemLoadSuccess" or "onItemLoadFail" gets run
Autodesk.Viewing.Initializer(options, function onInitialized() {
// Select the container for the viewer
viewerApp = new Autodesk.Viewing.ViewingApplication(container);
// Load settings, i.e extension manager
viewerApp.registerViewer(viewerApp.k3D,
Autodesk.Viewing.Private.GuiViewer3D, { extensions: [ 'ExtensionManager'] });
// Select model to load defined by URN
viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});
}
function onDocumentLoadSuccess(doc) {
var viewables = viewerApp.bubble.search({ 'type': 'geometry' });
if (viewables.length === 0) {
console.error('Document contains no viewables.');
return;
}
// Choose any of the avialble viewables
viewerApp.selectItem(viewables[0], onItemLoadSuccess, onItemLoadFail);
}
function onItemLoadSuccess(viewer, item) {
console.log('onItemLoadSuccess()!');
}
function onItemLoadFail(errorCode) {
console.error('onItemLoadFail() - errorCode:' + errorCode);
}
The PDF file will still open and load, so I am wondering if there might be a different way to run an onItemLoadSuccess function, or we have to do something a bit differently to ensure that our PDF's also gets loaded correctly.
Any help is highly appreciated!
Starting from Viewer v6.3 you can load PDF directly with Autodesk.PDF and pass in callbacks to loadModel like you do other models:
Autodesk.Viewing.Initializer(options, function() {
viewer.start()
viewer.loadExtension('Autodesk.PDF').then(function() {
viewer.loadModel('/path/to/pdf', { page: 1 }, onLoadSuccess, onLoadFail);
});
});
See release notes here: https://forge.autodesk.com/blog/viewer-release-notes-v-63
(Adding to Bryan's answer...)
I wrote a blog post about this. Take a look at the DEMO and sample code to help answer your question about 'onItemLoadSuccess / onItemLoadFail' events.
BLOG: https://forge.autodesk.com/blog/fast-pdf-viewingmarkup-inside-forge-viewer
DEMO: https://wallabyway.github.io/offline-pdf-markup/
Hope that helps!

Custom HTML element attribute not showing - Web-Components

I'm exploring web-components custom HTML elements, and I am running into a problem adding custom attributes to my custom elements: any value I set in the markup is never honored.
For a simple element like this, which should show the text supplied in the "flagtext" attribute, it does always show the default value.
<test-flag flagtext="my text"></test-flag>
Full JSBin sample is here.
The JSBin uses the Polymer library (as this is the only thing I can pull in there). I am using webcomponents.js generally, same result. Both in Chrome 49 and in Firefox 45 gives same result. There is no error showing in the console or debugger.
Every sample I find on the web has similar code but I tried various versions and it always refuses to update. I even copied a few samples into JSBin and they do not work either.
What could be wrong? I understand it is experimental technology but the consistency with which this isn't working is still surprising. Has this standard been abandoned? (I see that the latest April 2016 W3C draft of custom elements has entirely changed its approach.)
When I define "attributeChangedCallback" function, it does not fire.
I can easily modify the property via Javascript, this is not a problem.
But why can I not specify the property in markup, as I am supposed to?
Edit - full code
Note that you'll need to put these into separate files for the HTML import, and that you need the "webcomponents-lite.js" library.
Main HTML file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
test-flag
{
border: 1px solid blue;
}
</style>
</head>
<body>
<script src="lib/webcomponents-lite.min.js"></script>
<link rel="import" href="test-flag.html">
Here is the custom test-flag component:
<p>
<test-flag flagtext="my text"></test-flag>
</body>
</html>
File: test-flag.html
<template>
<style>
</style>
Content:
<div id="testflagID">
</div>
</template>
<script>
(function() {
var _currentScript = (document._currentScript || document.currentScript);
var importDoc = _currentScript.ownerDocument;
var customPrototype = Object.create(HTMLElement.prototype);
Object.defineProperty(customPrototype, 'flagtext', {value: '(default)', writable: true});
document.registerElement('test-flag', {prototype: customPrototype});
customPrototype.createdCallback = function()
{
var template = importDoc.querySelector('template');
var clone = document.importNode(template.content, true);
var idx = clone.querySelector("#testflagID");
idx.textContent = this.flagtext;
var root = this;
var createdElement = root.appendChild(clone);
};
})();
</script>
There are 2 concepts that are not automatically linked together.
In the HTML code:
<test-flag flagtext="my text"></test-flag>
...term flagtext is an HTML attribute (not a property).
In the JavaScript code:
Object.defineProperty(customPrototype, 'flagtext', {value: '(default)', writable: true})
...term flagtext is a JavaScript property (not an attribute).
For standard elements, the browser automatically binds the property value to the attribute value (and vice versa). For Custom Elements, too (with standard attributes). But if you want to add a custom attribute, you'll have to bind it manually.
For example, in the createdCallback() method, add:
this.flagtext = this.getAttribute( 'flagtext' ) || '(default)'
Live sample:
document.registerElement( 'test-flag' , {
prototype: Object.create( HTMLElement.prototype, {
flagtext: {
value: '(default)',
writable: true
},
createdCallback: {
value: function()
{
this.flagtext = this.getAttribute( 'flagtext' ) || this.flagtext
this.innerHTML = 'flagtext=' + this.flagtext
}
},
} )
} )
<test-flag flagtext='new content'>Hello</test-flag>
NB: the attributeChangedCallback() method is fired only when an attribute is changed after element creation (which is not the case here).

Edge Animate: how to move javascript into html?

I need to create a self-contained html banner in Edge Animate. For this I have already encoded the images to base24. I just need to include the javascript into that html. When I publish my banner, Edge by default adds a 'edge_includes' folder which contains 'edge.6.0.0.min.js' and a javascript file in the same location as the html file which is called the same as the html file but with a '_edge.js' extention. Like for example 'text_edge.js'. Both .js files need to be moved to the published html file.
The 'edge.6.0.0.min.js' file I can move easily enough by moving it's script between the script tags of the html file which mentions that .js file.
The test_edge.js file however is more difficult. A typical published html file contains this amongst others:
<script> AdobeEdge.loadComposition('test', 'EDGE-102396420', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "300px",
height: "250px" }, {"dom":{}}, {"dom":{}});
</script>
This is - I guess - where Edge loads that 'test_edge.js' file, through 'loadComposition'. But how can I copy the contents of that test_edge.js file into my html file then? I can't replace 'test' with the contents of 'test_edge.js' for example. Is there some other way to load that file's content into my html file? By coping it between script tags and making loadComposition load that scripted part instead of the external test_edge.js file for example?
It might be strange, but it should work if you just put the js inside the <script> tags. The header should look something like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<style>
.edgeLoad-EDGEK-472634723 { visibility:hidden; }
</style>
<script>
//Here goes the whole content from the test_edge.js
//Just ctrl+C and ctrl+V everything from it
</script>
<script>
//Here goes the whole content from the edge.6.0.0.min.js
//Just ctrl+C and ctrl+V everything from it
</script>
<script>
//Here goes the AdobeEdge.loadComposition stuff...
</script>
</head>
And also don't forget to create the class itself inside the <body> part
<div class="EDGE-102396420"></div>
Had a similar issue wanted to integrating js into one html, but I couldn't get it to work wihtout some tweaking in the edge runtime itself, so unfortunately it'll ruin the cdn speed adobe gives you. But otherwise the approach is similar to the answer given by #Klajbar.
If you make a check inside the edge runtime to can ensure compatibility with other files the requires edge runtime
What I did was to add a variable in loadComposition and then encapsulate the call which has f.load(a + "_edge.js") in a if statement to make sure is runs without the variable if need be.
Excerpt from modified edge.runtime.js example
//added inline as last variable
loadComposition: function(a, b, c, g, m,inline) {
function n(a, g) {
W(function() {
var m =
d("." + b),
k = /px|^0$/,
n = c.scaleToFit,
e = c.centerStage,
h = c.minW,
f = c.maxW,
l = c.width,
s = c.height,
y = m[0] || document.getElementsByTagName("body")[0];
"absolute" != y.style.position && "relative" != y.style.position && (y.style.position = "relative");
s && (y.style.height = s);
l && (y.style.width = l);
/^height$|^width$|^both$/.test(n) && (h = k.test(h) ? parseInt(h, 10) : void 0, f = k.test(f) ? parseInt(f, 10) : void 0, v(d(y), n, h, f, !1, c.bScaleToParent));
/^vertical$|^horizontal$|^both$/.test(e) && t(y, e);
a && L(H[b], null, a.dom, a.style, m[0], g + b);
m.removeClass("edgeLoad-" +
b)
})
}
/** removed some code here just for legibility **/
//if statement to override loading js files
if(!inline){
ba ? (window.edge_authoring_mode ||
(g ? (f.definePreloader(g), e()) : f.load(a + "_edgePreload.js", e)), a && (c && c.bootstrapLoading ? ka.push(a) : window.edge_authoring_mode && c.sym ? f.load(a +
"_edge.js?symbol=" + c.sym) : f.load(a + "_edge.js"))) : window.edge_authoring_mode ||
(m ? (f.defineDownLevelStage(m), h()) : f.load(a + "_edgePreload.js", h))
f.load(a + "_edge.js");
}
Once that's done you can include the code into the same html, where runtime is loaded first, then loadComposition block, then the _edge.js code.
Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<script>
//modified edge.runtime.js file
</script>
<style>
.edgeLoad-EDGE-24658395 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('jem%26fix_afrens_930x180_uge14', 'EDGE-24658395', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "930px",
height: "180px"
}, {"dom":{}}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","960px","180px"]}},"dom":{}},true);
//notice appeded boolean value as the end to enable the override.
</script>
<!--Adobe Edge Runtime End-->
<script id="test">
// contents of _edge.js file
</script>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-24658395">
</div>
</body>
</html>
I just used it for loading just one _edge.js and haven't tested if you choose including the preloading stuff.
Just put you *_edge.js after runtime js.
In runtime js search for timeout function = 10 sec.
Change this to 0 sec, and runtime will start your animate at once load.
But you still will have error load *_edge.js in console. It is not so important.
Put absolute path of the folder where the test_edge.js file is present.
For example
test_edge.js file is under a/b/c folder then
<script> AdobeEdge.loadComposition('/a/b/c/test', 'EDGE-102396420', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "300px",
height: "250px" }, {"dom":{}}, {"dom":{}});
</script>
Adobe Edge Embed js in html file
When you see edge html files. There are two js and images.
Both js are externally called. One is library and second is function called js ex.(728x90_edge.js)
Now, when upload all files in DFP type custom, then you use macro for 728x90_edge.js and all images src in this js.
Then how to use macro for images. That is challenge.
So you will have to embed this js in html. then you will use macro for images.
Follow the steps.
1, download liabrary js
remove below line in liabrary(edge.6.0.0.min.js), search after beautify
"_edge.js?symbol=" +
4.+ "_edge.js"
save and embed in html (<script type="text/javascript" src="edge.6.0.0.min - Copy.js"></script>)
cut all code from 728x90_edge.js and embed in html, after end of loadComposition function closing </script>
Now 728x90_edge.js will be empty, it's only use for loading.
use full name of file in AdobeEdge.loadComposition('728x90', 'EDGE-11479078', {
Ex. AdobeEdge.loadComposition('728x90_edge.js', 'EDGE-11479078', {
Now upload all files html, images and two js files.
Now you can use macro for two js file and images.
It's working on Local and DFP.

Retrieve Plotly brush limits in Django environment

First of all I would like to say I have very few experience in Django and plotly, so excuse me if I may be asking something which makes no sense or has very few meaning.
In Django enviroment I know that programming logic takes place in the "Views.py" file, and all variables set on this file can be transfered to the "template.html" file and use them inside double curly braces "{{ VariableFromView }}".
I was wondering if there is any way, once the plot is created, to retrieve the limits of the displayed area in the plotly plot, either on the "view.py" or "template.py" files, and save them in a variable which could be used in the "template.html" file, such as:
Variable definition example:
xbrush = [plotly.xmin, plotly.xmax]
ybrush = [plotly.ymin, plotly.ymax]
Variable call in template
{{ xbrush }}
{{ ybrush }}
In my case I amb using Python code for the "Views.py" and Javascript and html for the "templates.html" file (as well as a little bit of Django template language for dealing with variables)
Thank you very much for your help!
There are multiple ways to achieve the same. I would suggest you to go through django tutorial once again to get better understanding of template context and variables. Since you already have variables xbrush and ybrush in your views.py, just make sure you return these in the context of your response. Like render('template.html', {'xbrush':xbrush, 'ybrush': ybrush}).Now in your template.html you can access these values using {{ xbrush }}. So now all you need now is create a script tag in your html file and now you can assign these values to javascript variables like var xbrush = {{ xbrush }}
You'll need to do this using JavaScript, since rendering and all interaction with a Plotly plot is done in the browser. There's a full example (including a CodePen) that's close to what you're trying to do in the Plotly documentation here: https://plot.ly/javascript/zoom-events/
var plot = document.getElementById('plot').contentWindow;
var plotTwo = document.getElementById('plotTwo').contentWindow;
document.getElementById('plot').onload = function() {
pinger = setInterval(function(){
plot.postMessage({task: 'ping'}, 'https://plot.ly')
}, 100);
};
window.addEventListener('message', function(e) {
var message = e.data;
if(message.pong) {
console.log('Initial pong, frame is ready to receive');
clearInterval(pinger);
// Listening for zoom events, but you can also listen
// for click and hover by adding them to the array
plot.postMessage( {
task: 'listen',
events: ['zoom']
}, 'https://plot.ly');
plotTwo.postMessage({
task: 'relayout',
'update': {
'xaxis.fixedrange': true,
'yaxis.fixedrange': true
},
}, 'https://plot.ly');
}
else if( message.type == 'zoom' ){
console.log('zoom', message);
drawRectangle( message['ranges'] );
}
else {
console.log(message);
}
});
function drawRectangle( ranges ){
var rect = {
'type': 'rect',
'x0': ranges['x'][0],
'y0': ranges['y'][0],
'x1': ranges['x'][1],
'y1': ranges['y'][1],
'fillcolor': 'rgba(128, 0, 128, 0.7)',
}
plotTwo.postMessage({
'task': 'relayout',
'update': { shapes: [rect] },
}, 'https://plot.ly');
}
function newPlot(){
var plotURL = document.getElementById('plotURL').value + '.embed';
var iframe = document.getElementById('plot');
iframe.src = plotURL;
var iframeTwo = document.getElementById('plotTwo');
iframeTwo.src = plotURL;
}

Using grunt-usemin with dynamically generated image paths

I'm using the Yeoman Webapp generator to build my static website.
For my preloader, I have the following snippet (I'm using requireJS for the JS, if that matters).
for(var i = 1; i <= config.numSlides; i++) {
images.push(config.imageBase + i + '.jpg');
}
As you can see, I just generate a path with a number and add .jpg to it. My images are simply called 1, 2, 3, ... .jpg.
However, since Yeoman uses grunt-usemin.. It renames my image files to something like: 7f181706.3.jpg. Because of this, my script cannot find the correct image anymore. Is there a way to solve this?
I was looking through the docs and found something like this:
assetsDir: 'images',
patterns: {
js: [[/(image\.png)/, 'Replacing reference to image.jpg']]
}
would that be an option? I tried it without luck. Not sure what the correct pattern would be.
You can have a better code sample in the test files of this library, concretely: https://github.com/yeoman/grunt-usemin/blob/master/test/test-usemin.js#L233
Where you can find the following code:
it('should allow for additional replacement patterns', function () {
grunt.file.mkdir('images');
grunt.file.write('images/image.2132.png', 'foo');
grunt.log.muted = true;
grunt.config.init();
grunt.config('usemin', {
js: 'misc.js',
options: {
assetsDirs: 'images',
patterns: {
js: [
[/referenceToImage = '([^\']+)'/, 'Replacing image']
]
}
}
});
grunt.file.copy(path.join(__dirname, 'fixtures/misc.js'), 'misc.js');
grunt.task.run('usemin');
grunt.task.start();
var changed = grunt.file.read('misc.js');
// Check replace has performed its duty
assert.ok(changed.match(/referenceToImage = 'image\.2132\.png'/));
});
I hope that helps!

Categories