gulp add pipe to convert to Vinyl objects - gulp

I have upgraded to gulp 4.0.2 version I need to update one of the tasks
const debug = require('gulp-debug');
const i18nextParser = require('i18next-parser');
function myTask() {
return gulp
.src(['./js/**/*.js', './js/**/*.jsx'])
.pipe(
i18nextParser({
locales: ['en', 'de'],
functions: ['translate'],
output: '/opt/locales/'
})
)
.pipe(debug())
.pipe(gulp.dest('/opt/locales/'));
});
I want these files to be converted to Vinyl objects:
[17:04:32] gulp-debug: opt/locales/de/translation.json
[17:04:32] gulp-debug: opt/locales/de/translation_old.json
[17:04:32] gulp-debug: opt/locales/en/translation.json
[17:04:32] gulp-debug: opt/locales/en/translation_old.json
otherwise I have and error
Error: Received a non-Vinyl object in `dest()`
Is there a function that I can pipe to in order to make this task work properly?
i18next-parser version is 0.7.0. Upgrading to latest 3.6.0 version doesn't produce any output at all.

So I solved this by adding extra step using gulp-map
const map = require('gulp-map');
const Vinyl = require('vinyl');
return gulp
.src(['./js/*.js', './js/*.jsx'])
.pipe(
i18nextParser({
locales: ['en', 'de'],
functions: ['translate'],
output: JSON_DIR
})
)
.pipe(map(function(file) {
// Explicitly convert to Vinyl object otherwise `gulp.dest()` will fail
return new Vinyl(file);
}))
.pipe(gulp.dest(JSON_DIR));

Related

create-react-app json only loaded if I do a console.log

I'm using create-react-app and I am importing a json into a component.
When I dev, on yarn run start, everything is ok, as expected.
When I build and deploy in prod, only the second code works?
The first one gives me an error, telling me g is undefined.
import gr from "./test.json";
export const getJo = (g) => {
return g.map(f => f.status);
}
getJo(gr)
By adding a console.log, this one works!
import gr from "./test.json";
export const getJo = (g) => {
console.log(g);
return g.map(f => f.status);
}
getJo(gr)

Gulp: custom pipe to transform a lot of files in a batch

edit it seems I'm trying to create some concat gulp pipe that first transforms the contents of the various files.
I have been using through2 to write a custom pipe. Scope: Using gulp-watch, run a task that loads all of them, transform them in memory and output a few files.
Through2 comes with a "highWaterMark" option that defaults to 16 files being read at a time. My pipe doesn't need to be memory optimized (it reads dozens of <5kb jsons, runs some transforms and outputs 2 or 3 jsons). But I'd like to understand the preferred approach.
I'd like to find a good resource / tutorial explaining how such situations are handled, any lead's welcome.
Thanks,
Ok, found my problem.
When using through2 to create a custom pipe, in order to "consume" the data (and not hit the highWaterMark limit), one simply has to add an .on('data', () => ...) handler, like in the following example:
function processAll18nFiles(done) {
const dictionary = {};
let count = 0;
console.log('[i18n] Rebuilding...');
gulp
.src(searchPatternFolder)
.pipe(
through.obj({ highWaterMark: 1, objectMode: true }, (file, enc, next) => {
const { data, path } = JSON.parse(file.contents.toString('utf8'));
next(null, { data, path });
})
)
// this line fixes my issue, the highWaterMark doesn't cause a limitation now
.on('data', ({ data, path }) => ++count && composeDictionary(dictionary, data, path.split('.')))
.on('end', () =>
Promise.all(Object.keys(dictionary).map(langKey => writeDictionary(langKey, dictionary[langKey])))
.then(() => {
console.log(`[i18n] Done, ${count} files processed, language count: ${Object.keys(dictionary).length}`);
done();
})
.catch(err => console.log('ERROR ', err))
);
rem mind the "done" parameter forcing the developper to make a call when it's done()

fs.readFileSync cannot find file when deploying with lambda

In my code I am calling a query from my lambda function
let featured_json_data = JSON.parse(fs.readFileSync('data/jsons/featured.json'))
This works locally because my featured.json is in the directory that I am reading from. However when I deploy with serverless, the zip it generates doesn't have those files, I get a
ENOENT: no such file directory, open...
I tried packaging by adding
package:
include:
- data/jsons/featured.json
but it just doesn't work. The only way I get this to work is manually adding the json file and then change my complied handler.js code to read from the json file in the root directory.
In this screenshot I have to add the jsons then manually upload it again and in the compiled handler.js code change the directory to exclude the data/jsons
I want to actually handle this in my servereless.yml
You can load JSON files using require().
const featured_json_data = require('./featured.json')
Or better yet, convert your JSON into JS!
For working with non-JSON files, I found that process.cwd() works for me in most cases. For example:
const fs = require('fs');
const path = require('path');
export default async (event, context, callback) => {
try {
console.log('cwd path', process.cwd());
const html = fs.readFileSync(
path.resolve(process.cwd(), './html/index.html'),
'utf-8'
);
const response = {
statusCode: 200,
headers: {
'Content-Type': 'text/html'
},
body: html
};
callback(null, response);
} catch (err) {
console.log(err);
}
};
I recommend looking at copy-webpack-plugin: https://github.com/webpack-contrib/copy-webpack-plugin
You can use it to package other files to include with your Lambda deployment.
In my project, I had a bunch of files in a /templates directory. In webpack.config.js to package up these templates, for me it looks like:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
'./templates/*'
])
]
};
fs.readFileSync cannot find file when deploying with lambda
Check the current directory and check target directory content in deploy environment. Add appropriate code for that checking to your program/script.

JSON report not generating for failed scenarios using protractor

If my scenarios got failed the JSON report not generating. But for passes scenarios I can able to see the JSON report.
Please find my config file as below.
In comment prompt console I can able to see the failure message:
W/launcher - Ignoring uncaught error AssertionError: expected false to equal true
E/launcher - BUG: launcher exited with 1 tasks remaining
You can save the report by using a hook, so don't generate the file form the protractor.conf.js file, but use a cucumber-hook for it.
The hook can look like this
reportHook.js:
const cucumber = require('cucumber');
const jsonFormatter = cucumber.Listener.JsonFormatter();
const fs = require('fs-extra');
const jsonFile = require('jsonfile');
const path = require('path');
const projectRoot = process.cwd();
module.exports = function reportHook() {
this.registerListener(jsonFormatter);
/**
* Generate and save the report json files
*/
jsonFormatter.log = function(report) {
const jsonReport = JSON.parse(report);
// Generate a featurename without spaces, we're gonna use it later
const featureName = jsonReport[0].name.replace(/\s+/g, '_').replace(/\W/g, '').toLowerCase();
// Here I defined a base path to which the jsons are written to
const snapshotPath = path.join(projectRoot, '.tmp/json-output');
// Think about a name for the json file. I now added a featurename (each feature
// will output a file) and a timestamp (if you use multiple browsers each browser
// execute each feature file and generate a report)
const filePath = path.join(snapshotPath, `report.${featureName}.${new Date}.json`);
// Create the path if it doesn't exists
fs.ensureDirSync(snapshotPath);
// Save the json file
jsonFile.writeFileSync(filePath, jsonReport, {
spaces: 2
});
};
}
You can save this code to the file reportHook.js and then add it to the cucumberOpts:.require so it will look like this in your code
cucumberOpts: {
require: [
'../step_definitions/*.json',
'../setup/hooks.js',
'../setup/reportHook.js'
],
....
}
Even with failed steps / scenario's it should generate the report file.
Hope it helps

Get json file for karma unit test

I want to get a JSON file in my unit test because I need to have it for my tests but I dont know how I can include the file
I run my test with karma and Jasmine. And my project is created with Angular 2.
The name of my JSON file is 'www/assets/mocks/emptyCalendarData.JSON'.
Does someone know how I can include a JSON file into a spec file?
Thanks
UPDATE
I tried to use HTTP get but then I got a system
let calendarData: Calendar;
http.get('www/assets/mocks/emptyCalendarData.json')
.map(res => res.json())
.subscribe(
data => calendarData = data,
err => console.log(JSON.stringify(err))
);
Then I get this error:
ERROR: Error{stack: null, originalErr: TypeError{stack: 'mergeOptions
get
eval code
eval#[native code]
__exec#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:1482:16
execute#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3896:22
linkDynamicModule#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3222:36
link#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3065:28
execute#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3402:17
doDynamicExecute#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:796:32
link#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:998:36
doLink#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:650:11
updateLinkSetOnLoad#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:698:24
http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:510:30
invoke#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:364:34
run#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:257:50
http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:609:61
invokeTask#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:397:43
runTask#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:294:58
drainMicroTaskQueue#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:515:43
invoke#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:467:41
http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:92:33
invokeTask#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:397:43
runTask#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:294:58
invoke#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:464:41', line: 38}, line: 821, sourceURL: 'http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624'}
There are many ways to do that:
import json if it is inside of your app: import * as json from './test'; //will import test.json
download file using Http and do map(res=>res.json())
for webpack use json-loader plugin: var json = require('./my.json')
for gulp/grunt etc. you could write code generator
I stash my Mock JSON data into a ts file like a variable. i.e
export var getMockResponseJSON = { 'key': value };
Later when I want to reach this variable, I simply import it like:
import {getMockResponseJSON} from "../JSONs";
and use it in my class
expect(getMockResponseJSON.key).not.toEqual(1);
You could leverage the Http class of Angular2 within your tests to do that.
Here is a sample within a beforeAll function:
beforeAll((done) => {
let injector = Injector.resolveAndCreate([ HTTP_PROVIDERS ]);
let http = injector.get(Http);
http.get('app/data.json').subscribe(
(data) => {
this.data = data.json();
done();
}
);
});
See this plunkr: https://plnkr.co/edit/k6jxHf?p=preview.