Gulp 4 Split Tasks Across Multiple Files Using Gulp-Hub Fails Due to Missing Get Function - gulp

Using Gulp 4 and the recipe for splitting my tasks into multiple files using gulp-hub throws this error just from attempting to load the task files. The task file is super simple just wanted to test everything was working.
I found this reference on Undertaker on Github for the get function, but I really don't understand what they are trying to say, and it seems like gulp-hub is supposed to be doing the lifting.
Anyone else run into this and know how to solve it?
Gulp File
'use strict';
var gulp = require('gulp');
var HubRegistry = require('gulp-hub');
// Load some files into the registry
var hub = new HubRegistry(['gulp/tasks/*.js']); // only one file help.js
// Tell gulp to use the tasks just loaded
gulp.registry(hub);
Help Task - /gulp/tasks/help.js
'use strict';
var gulp = require('gulp');
gulp.task('help', []);
Error Thrown
$ gulp help
[01:36:37] Loading gulp\tasks\help.js
D:\projects\app\node_modules\undertaker\lib\helpers\validateRegistry.js:36
throw err;
^
AssertionError: Custom registry must have `get` function
at validateRegistry (D:\projects\app\node_modules\undertaker\lib\helpers\validateRegistry.js:28:5)
at Gulp.registry (D:\projects\app\node_modules\undertaker\lib\registry.js:17:3)
at Object.<anonymous> (D:\projects\app\gulpfile.js:11:6)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)

You are probably running gulp-hub#0.8.0 which is the version that is currently published to npm and is designed for gulp 3.x.
For gulp 4.x you need to install gulp-hub from one of the development branches on GitHub. Currently there's 4.0 and registry-init.
The 4.0 branch doesn't work right now because it fails the registry validation of undertaker.
The registry-init branch seems to work however. You can install it like this:
npm uninstall gulp-hub
npm install --save-dev frankwallis/gulp-hub#registry-init

Update on 12.10.2016
I work with yeoman-fountainjs and in their package.json is the following dev-dependency definied, which works like a charm:
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",

I ran into the same error but it was because I failed to expose the tasks correctly to Gulp.
At first I was using CommonJS like this in my help.js file and getting the same error:
exports.help = help;
So I changed it to a Gulp task and it worked:
gulp.task("help", help);

Related

Struggling to get gulp v4 to watch tasks with babel plugin

When I try to gulp watch, I get the following error:
[15:46:56] Task never defined: watch
[15:46:56] To list available tasks, try running: gulp --tasks
Here are my functions from gulpfile.js.
function watchChanges(cb) {
watch(['assets/js/*.js'], parallel(buildSiteJS));
watch(['assets/scss/style.scss', 'assets/scss/**/*.scss'], parallel(compileStyleSCSS));
watch(['**/*.php'], parallel(reloadPage));
cb();
}
With the ending export statement like:
exports.default = parallel(serveBrowserSync, mainTasks, watchChanges);
I'm not sure if the syntax is incorrect causing the 'task never defined' error and I've tried a lot of searching online and not got anywhere with it.
Let me know if you need to see more of the gulpfile.js.
Gulp: 4.0.2
Gulp Babel: 8.0.0

Laravel 5.3 passport authentication: unable to compile view components with gulp

I've been following the laravel's api token-based authentication using passport. I followed all the steps in this screen cast by Taylor Otwell himself. To publish the passport Vue components, I ran the command:
php artisan vendor:publish --tag=passport-components
and the components where rightly published in the resources/assets/js/components directory.
Next,I registered the some components in resources/assets/js/app.js file and here's the result:
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: '#app'
});
I ran the command gulp but gulp wasn't recognized so I installed with the following two commands:
npm install --global gulp-cli
npm install --save-dev gulp
Here is my gulpfile.js file by the way (at the root of my project):
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
var gulp = require('gulp');
elixir(function(mix){
mix.sass('app.scss')
.webpack('app.js');
});
next a pasted the following components in the home.blade.php view file after logging in:
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
I now ran the command gulp in the root of my application and got the following error:
> Error: Cannot find module 'laravel-elixir'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/home/awa/Desktop/laravel53/gulpfile.js:1:78)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
I may be making some silly mistaker here but I just can't get my way out of it. I am new to Laravel. I'll appreciate any help.
Thanks
It looks like you don't have Laravel Elixir installed. It is is not automatically installed with laravel, you need to run:
npm install
from the root of your project, which will download laravel elixir and all it's dependencies.

Configuring a dev machine to see PowerBI code demos (JSON support in Visual Studio 2015?)

How do I install JSON support in Visual Studio 2015?
I saw a video by Satchin about how to prepare my PC, and installed Git and Node.JS without any problems, and everything was OK (I think; I'm not a web developer and I may be missing something) until i tried debugging (ctrl+f5) .
when i enter visual studio, contrary to what Satchin said in the video, the application is not continuously integrating. My Task runner explorer has this info:
Failed to run "C:\Users\L.Ricardo\Documents\GitHub\powerbi-visuals\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
Error: Cannot find module 'accord'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (C:\Users\L.Ricardo\Documents\GitHub\powerbi-visuals\node_modules\gulp-less\index.js:2:22)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
Javascript language reference has this info:
11:30:09.2572: Referenced file 'C:\Users\L.Ricardo\Documents\GitHub\powerbi-visuals\src\Clients\PowerBIVisualsPlayground\externals.min.js' not found.
11:30:09.2572: Referenced file 'C:\Users\L.Ricardo\Documents\GitHub\powerbi-visuals\src\Clients\PowerBIVisualsPlayground\powerbi-visuals.js' not found.
11:30:09.2572: Referenced file 'C:\Users\L.Ricardo\Documents\GitHub\powerbi-visuals\src\Clients\PowerBIVisualsPlayground\PowerBIVisualsPlayground.js' not found.
11:30:10.0229: Referenced file 'externals.min.js' not found.
11:30:10.0229: Referenced file 'powerbi-visuals.js' not found.
11:30:10.0229: Referenced file 'PowerBIVisualsPlayground.js' not found."
(some info maybe from previous tries...)
in the webpage, the dropdowns don't work. The error seems to be:
0x800a1391 - runtime error JavaScript: '$' line 51 is not defined
...which I think means that I need to install JSON support.
So, how do I install JSON support in Visual Studio 2015?
Or is there some other reason for the problems I'm seeing?
From the sound of it you might have missed the "One Time setup" steps. https://github.com/microsoft/powerbi-visuals
One-Time Setup
In order to build the Power BI visuals, ensure that you have Git and Node.js installed.
Clone a copy of the repo:
git clone https://github.com/Microsoft/PowerBI-visuals.git
Change to the PowerBI-visuals directory:
cd PowerBI-visuals
Install dev dependencies:
npm install # This command will install Gulp and all necessary modules
turns out there were happening errors when running npm install.
I executed npm cache clean and then npm install and now it's working!
Thanks

jasmine-reporters modifySuiteName not work?

I'm using protractor with jasmine-reporters 2.0.7
I tried to use the modifySuiteName option to modify suite names.
This is what in my conf.js:
multiCapabilities: [{
browserName: 'firefox'
}, {
browserName: 'chrome'
}],
onPrepare: function() {
var jasmineReporters = require('jasmine-reporters');
return browser.getProcessedConfig().then(function(config) {
var browserName = config.capabilities.browserName;
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter({
savePath: 'c://scripts',
filePrefix: browserName,
consolidateAll: true,
modifySuiteName: function(generatedSuiteName, suite) {
return browserName+ '.' + generatedSuiteName;}
}));
});
},
I suppose to see
testsuite name="chrome.Demo App"
in chrome.xml
and
testsuite name="firefox.Demo App"
in firefox.xml
But I can only see
testsuite name="Demo App"
in both files.
Is there anything wrong in my code?
Okay now I figure out that my issue is caused by a stupid mistake.
I'm using windows 8 and running cmd under the folder c:\scripts.
I'm so new to nodejs and npm that during the set-up process I used npm install --save-dev jasmine-reporters#^2.0.0 and few days later I used npm install -g jasmine-reporters#latest
So there are 2 jasmine-reporters in my system, one in C:\Users\xxx\AppData\Roaming\npm\node_modules\jasmine-reporters
and another in C:\scripts\node_modules\jasmine-reporters,
with version 2.0.7 and 2.0.0 in package.json, respectively.
I just update my jasmine-reporters in C:\scripts\node_modules to 2.0.7 and the script finally works!
Thanks for your time, I really appreciate it.
As far as i see, there is no fault in your code. If your code is generating chrome and firefox xml's then everything with your configuration should be fine. Your code is working perfectly fine in my protractor. I am using Jasmine 2.3.1 with protractor 2.1.0. Try updating your protractor and jasmine framework to the latest version and then run your test suite. To update your jasmine run the below command -
npm update -g jasmine
Also if you have not added the framework tag after multiCapabilities tag in your conf.js file then you should be doing so as shown below -
framework: 'jasmine2',
Hope this solves your issue.

Get Chrome stack trace of error object relative to sourceURL

When using Chrome I am getting an error via the Mocha test runner, captured as part of afterEach with this.currentTest.err.
I am compiling coffeescript with browserify with the debug option using the awesome coffeeify plugin. This produces a single compiled file bundle.js with a sourceMappingURL=data:... that allows me to view and debug the original coffeescript directly.
Unfortunately when I access the err.stack in the afterEach Mocha hook, the stack contains references to bundle.js and not the corresponding .coffee files, which would be much more useful.
Here is some sample code with browserify.
First, installing it (for convenience) with npm:
$ npm install -g browserify; npm install coffeeify
x.coffee
try
throw Error("Thrown.")
catch err
console.log err.stack
Convert to x.js with:
$ browserify -t coffeeify x.coffee -d > x.js
x.html
<html>
<head>
<script src='x.js'></script>
</head>
<body></body>
</html>
If one opens this in Chrome the dev tools will show x.js, x.coffee (from the sourceMapURL) and x.html.
When we run this HTML page we get the following output to the console:
Error: Thrown.
at Error ()
at Object. (file://localhost/Users/bmh/tmp/x.js:5:9)
at i (file://localhost/Users/bmh/tmp/x.js:1:219)
at err (file://localhost/Users/bmh/x.js:1:382)
at file://localhost/Users/bmh/tmp/x.js:1:400
What we would expect is to have the trace refer to the .coffee file, looking something like this (which I am making up here for illustrative purposes):
Error: Thrown.
at Error ()
at Object. (file://localhost/Users/bmh/tmp/x.coffee:2:5)
Has anyone had any success converting the error stack to one that refers to the items at their source map locations?
I'm not sure about coffeeify, but the source-map-support module adds .stack support for code bundled with browserify. Just npm install source-map-support and put require('source-map-support').install() at the top of your code.