i'm stuck a little - i want to replace image file names with their hashed version inside my manifest file.
Manifest looks like this:
{
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
I want those icon src to be replaced with the hashed filenames which looks like this: "android-chrome-192x192-b03df0131.png"
My gulp file which should do it looks like this:
const gutil = require('gulp-util');
module.exports = function (gulp, plugins) {
return function () {
const manifest = gulp.src('public/dist/rev-manifest.json');
return gulp.src(['public/dist/#(css|js)/**','public/dist/img/icon/**.json'])
.pipe(plugins.revReplace({replaceInExtentions: ['.json']}))
.pipe(plugins.revReplace({manifest: manifest}))
.pipe(gulp.dest('public/dist'));
};
};
after a lot of googling and Documentation reading i got it working :D
So if someone searches for this:
const gutil = require('gulp-util');
module.exports = function (gulp, plugins) {
return function () {
const manifest = gulp.src('public/dist/rev-manifest.json');
function replaceIconPath(filename) {
if(filename.includes('android-chrome-')) {
return filename.replace('img/icon/', '');
}
return filename;
}
return gulp.src('public/dist/#(css|js|img)/**')
.pipe(plugins.revReplace({
replaceInExtensions: ['.json', '.css', '.js', '.html', '.hbs'],
manifest: manifest,
modifyUnreved: replaceIconPath,
modifyReved: replaceIconPath
}))
.pipe(gulp.dest('public/dist'));
};
};
So let me explain this shortly - the important part is in plugins.revReplace.
You need the option replaceInExtension and add '.json' but you also need to specify the default options or else they will be lost.
The 'modifiyUnreved' and 'modifyReved' options are just needed if you have to modify the filenames further. In my case it couldn't find the file because my rev-manifest was on another level compared to my manifest file. So i needed to cut the path for it to find the src and replace it.
Related
I've been trying to fetch some url using Devtools 'copy as fetch' but I can see no response. If I try replay xhr, it will work. It's strange since it doesn't work for this particular site, but if I try 'copy as fetch' on some others it does bring a result.
What I'm trying to do is grab the response body and display it some other way (it's a schedling software, and I'm trying to modify the way it displays the calendar view since it displays everything together).
I have an extension that enables me to modify XMLHttpRequest so I can get the response of any XHR, but since the first async executes before I inject the script, then I'm always missing the first one.
I plan on using chrome webRequest to stop the first one and fetch it again.
manifest.json
{
"name": "jobber",
"version": "2.0",
"description": "Build an Extension!",
"manifest_version": 2,
"permissions": [
"webNavigation",
"webRequest",
"*://secure.name.com/*"
],
"content_scripts": [{
"matches": ["*://secure.name.com/calendar*"],
"js": ["contents.js"],
"run-at": "document_start"
}],
"externally_connectable": {
"matches": ["*://secure.name.com/calendar*"]
},
"background": {
"scripts": ["background.js"]
}
}
contents.js
(function () {
'use strict';
let s = document.createElement("script");
s.textContent = overloadXHR();
document.head.insertBefore(s, document.head.children[0]);
s = document.createElement("script");
s.textContent = displayCalendar;
document.head.insertBefore(s, document.head.children[0]);
})();
function overloadXHR() {
const text = `
console.log(\`overriding: \${Date.now()}\`);
const rawOpen = XMLHttpRequest.prototype.open;
let json = [];
(function(){
XMLHttpRequest.prototype.open = function () {
this.addEventListener("readystatechange", e => {
if (/secure.name.com.calendar.*?calendar=true/i.test(this.responseURL)) {
if ((this.status == 200) && (this.readyState == 4)) {
console.log(this.readyState);
try {
json = JSON.parse(this.response);
window.setTimeout(() => (window.displayCalendar({json}))({json}), 1000);
}
catch (e) { console.log(e); }
}
}
});
rawOpen.apply(this, arguments);
}
}())
`;
return text;
}
function displayCalendar({ json }) {
// do something
}
I tried POST requests too. I could see that they would work, but no response given tho.
original request:
copy as fetch
copy as fetch response
copy as fetch timing
It Shows value as undefined in webpage when i enter value from JSON file, Any idea?
JSON FILE:
[
{
"firstName":"1233232322",
"lastName":"ramakrishnan",
"email":"parthiramkrish#gmail.com",
"password":"secondmay1991",
"confirmPassword":"secondmay1991"
}
]
SPEC FILE:
'use strict';
browser.ignoreSynchronization = true;
var testdata1 = require('./testdata1.json');
describe("Test the inksoft.com create an account page", function () {
it("enter the account details", function () {
browser.get("https://qa.inksoft.com/EGT");
browser.ignoreSynchronization = true;
browser.sleep(15000);
element(by.xpath("//a[text()='Create Account']")).click();
browser.sleep(20000);
element(by.xpath("//input[#name='firstName']")).sendKeys( testdata1.firstName);
element(by.xpath("//input[#name='lastName']")).sendKeys( testdata1.lastName);
element(by.xpath("//input[#name='email']")).sendKeys( testdata1.email);
element(by.xpath("//input[#name='password']")).sendKeys( testdata1.password);
element(by.xpath("//input[#name='confirmPassword']")).sendKeys( testdata1.confirmassword);
element(by.xpath("//input[#type='submit']")).click();
});
});
CONF FILE:
exports.config = {
//The address of a running selenium server.
seleniumAddress: 'http://localhost:4444/wd/hub',
//Here we specify the name of the specs files.
framework: 'jasmine',
specs: ['inksoftdata.js'],
jasmineNodeOpts: {
showColors: true,
includeStackTrace: true,
defaultTimeoutInterval: 1440000
},
}
In testdata1.json file, all the data are stored as an array of objects. So to access the data from testdata1 variable you need to specify the array index like testdata1[0].firstName.
I'm manipulating a set of files and I am using gulp-replacer-task to replace the content of processed files with "strings" based on the basename or path of the file currently in the pipe-line.
How do i get at the file's properties currently in the pipe-line ?
gulp.task('svgbuild', function() {
return gulp.src('./src/*.svg')
.pipe(replace({
patterns: [
{
match: /STRING_TO_MATCH/g,
replacement: function() {
// how to get the basename of the "file" in the stream;
var str = 'file.basename'
// manipulate to get replacement string based on basename
var repl = str.toUpperCase()+'-inc'
return repl;
}
}
]
}))
});
Somewhat later than I hoped, but it appears I found a solution for the problem using gulp-tap. This is what my gulpfile.js looks like:
var gulp = require('gulp'),
path = require('path'),
replace = require('gulp-replace-task'),
tap = require('gulp-tap');
gulp.task('svgbuild', function () {
return gulp.src('*.txt')
.pipe(tap(function (file) {
return gulp.src(file.path)
.pipe(replace({
patterns: [
{
match: /foo/g,
replacement: function () {
var ext = path.extname(file.path),
base = path.basename(file.path, ext);
return base.toUpperCase() + '-inc'
}
}
]
}))
.pipe(gulp.dest('build'));
}));
});
I think you must look for the solution in Node.js. Maybe this helps: https://nodejs.org/api/path.html?
The icanhaz documentation uses this as an example as how to pull ich templates from a remote server.
$.getJSON('/myserver/templates.json', function (templates) {
$.each(templates, function (template) {
ich.addTemplate(template.name, template.template);
});
});
However, the documentation doesn't really tell you what the file on the remote server has to look like. Anyone have any ideas?
Your templates JSON object may look like this:
{
"templates": {"name": "optionTemplate",
"template": "{{#options}}<option value='{{value}}'>{{display}}</option>{{/options}}"
}
}
This will define a template for options in a select box.
You can add the template using the code you specified (actually I tweaked it slightly as I couldn't get it to work as specified):
$.getJSON('templates.json', function (templates) {
$.each(templates, function () {
ich.addTemplate(this.name, this.template);
});
});
//now call getJSON on your input data
$.getJSON('options.json', function (data) {
var optionElements = ich.optionTemplate(data);
$('#selectBox').append(optionElements);
}
For clarity, here is what options.json contains:
{
"options": [
{ "value": "optionValue",
"display": "optionDisplay"
},
{ "value": "optionValue2",
"display": "optionDisplay2"
}]
}
Do let me know how you get on :)
Let's say in my Gruntfile I have pkg: grunt.file.readJSON('package.json'), and inside the package.json is the following object:
{
"file": "data.json"
}
How would I access the data from data.json? Which might look something like this:
{
"name": "Jon Schlinkert",
"company": "Sellside"
}
Just load the first file, then use the result of that to load the second file and add it to the grunt config. Like this:
module.exports = function (grunt) {
var pkg = grunt.file.readJSON('package.json');
grunt.initConfig({
pkg: pkg,
data: grunt.file.readJSON(pkg.file),
task: {
target: {
files: {
'dest': '<%- data.name %>'
}
}
}
});
grunt.registerMultiTask('task', function() {});
console.log('name', grunt.config('data.name'));
};
Maybe I don't understand the problem, but what about:
var pkg = grunt.file.readJSON('package.json');
var data = grunt.file.readJSON(pkg.file);