Develop Reference

Multiple functions with onPrepare in Protractor

I have a conf.js file in my Protractor test suite.
There was a single onPrepare entry at first but now I wish to add a second.
I'm struggling to get the syntax right so that what follows onPrepare is error free.
Original entry:
onPrepare: function() {
jasmine.getEnv().addReporter(reporter);
},
and the second entry is:
const protractorImageComparison = require('protractor-image-comparison');
browser. protractorImageComparison = new protractorImageComparison(
{
baselineFolder: 'path/to/baseline/',
screenshotPath: 'path/to/save/actual/screenshots/'
}
);
},
}
Do I need to add a second function() above const?

Have you try as below?
A tip: onPrepare is the only one place in protractor conf file you can use the variable: browser, because only when run to this function the browser variable initialize complete.
onPrepare: function() {
jasmine.getEnv().addReporter(reporter);
const protractorImageComparison = require('protractor-image-comparison');
browser.protractorImageComparison = new protractorImageComparison(
{
baselineFolder: 'path/to/baseline/',
screenshotPath: 'path/to/save/actual/screenshots/'
}
);
},

Callback or event undefined in gulp 4 watch task when using gulp.series

Inside my gulpfile I have the following task, where I would like to log the changed file's name:
gulp.task('watch', function() {
var stylesWatcher = gulp.watch(resolvePath(paths().source.scss) + '/**/*.scss', { awaitWriteFinish: true });
stylesWatcher.on('change', gulp.series('styles', function(cb) {
// Log filename here
cb();
}));
});
Keep in mind that 'styles' is a gulp task.
I have tried to log it in multiple ways, i.e. using function(path, stats) instead of function(cb), like it's shown in the gulp 4 documentation.
An example of a result I get when I console.log the path while using the path and stats parameters like in the docs is:
function done() {
d.removeListener('error', onError);
d.exit();
return cb.apply(null, arguments);
}
When I remove the 'styles' and the gulp.series though and just leave a function like this:
stylesWatcher.on('change', function(path, stats) {
console.log(path);
});
The path is indeed logged in the console.
Is there any way to console log the path when using gulp.series?

Gulp injection missing files

I'm trying to use gulp-inject but something is not syncing up properly. I think it has to do with my cleaning task.
gulp.task("clean", function () {
return gulp.src([
"tmp/client/**/*",
"wwwroot/**/*.css",
"wwwroot/**/*.js"
], { read: false })
.pipe(plumber())
.pipe(clean());
});
This runs before my compile tasks, such as:
gulp.task("dev:tsc", ["clean"], function () {
return tsResult.js
.pipe(sourceMaps.write("."))
.pipe(gulp.dest("wwwroot/js"));
});
Then all my compile steps run before a build task:
function injectTask(assets) {
var layout = gulp.src("Views/Shared/_Layout.cshtml");
var sources = gulp.src(assets, { read: false });
return layout.pipe(inject(sources, {
ignorePath: "wwwroot",
addPrefix: "~",
addRootSlash: false
})).pipe(gulp.dest("Views/Shared"));
}
gulp.task("dev:build", ["dev:tsc", "...other tasks..."], function () {
var vendorSources = vendorConfig.map(function (vendor) {
return ["wwwroot/js", vendor.srcFile].join("/");
});
return injectTask(vendorSources.concat([
"wwwroot/css/*.css",
"wwwroot/js/*.js"
]));
});
Sometimes all my files get injected, sometimes some are missing. Sometimes I get an error about a file missing. I suspect I'm missing some step to correctly declare dependencies on the streams and prevent them from overlapping, I just can't see what it is. The complete gulpfile is here. Any ideas?

Gulp clean / del behaviour has changed

Part of my gulpfile.js
const del = require('del');
const chrome_dir = 'build/chrome';
const ff_dir = 'build/firefox';
gulp.task('clean', function (cb) {
del([chrome_dir, ff_dir], cb);
});
gulp.task('default', ['clean'], function () {
gulp.start('build packages', 'JS Backend', 'i18n', 'ExtRes', 'styles', 'JS Content', 'templates');
});
worked well.
Then I installed a new system and there maybe got new versions of gulp and del and whatever.
Now gulp stops after cleaning.
I can call all tasks manually, that's working fine.
Could only be a change in the behaviour of del...
How can I fix this?

One of the most important changes on v2 is that now it returns a Promise instead of using a callback to handle async. From del documentation.
You simply have to re-write this part of your code:
gulp.task('clean', function (cb) {
del([chrome_dir, ff_dir], cb);
});
like this:
gulp.task('clean', function () {
return del([chrome_dir, ff_dir]);
});

How can I correctly read in multiple files inside a Gulp task?

I have a Gulp task that renders a file containing a Lodash template and puts it in my build directory. I use gulp-template to do the rendering.
To render correctly, my template needs to be passed a list of files from my build directory. I get this list using glob. Since the glob API is asynchronous, I'm forced to write my task like this:
gulp.task('render', function() {
glob('src/**/*.js', function (err, appJsFiles) {
// Get rid of the first path component.
appJsFiles = _.map(appJsFiles, function(f) {
return f.slice(6);
});
// Render the file.
gulp.src('src/template.html')
.pipe(template({
scripts: appJsFiles,
styles: ['style1.css', 'style2.css', 'style3.css']
}))
.pipe(gulp.dest(config.build_dir));
});
});
This seems inelegant to me. Is there a better way to write this task?

The easiest way to fix your specific problem is to use the synchronous mode for glob, which is in the docs you linked to. Then return the result of gulp.src.
gulp.task('render', function() {
var appJsFiles = _.map(glob.sync('src/**/*.js'), function(f) {
return f.slice(6);
});
// Render the file.
return gulp.src('src/template.html')
.pipe(template({
scripts: appJsFiles,
styles: ['style1.css', 'style2.css', 'style3.css']
}))
.pipe(gulp.dest(config.build_dir));
});

If you want a task to run asynchronously, take in a callback.
gulp.task('render', function(cb) {
glob('src/**/*.js', function (err, appJsFiles) {
if (err) {
return cb(err);
}
// Get rid of the first path component.
appJsFiles = _.map(appJsFiles, function(f) {
return f.slice(6);
});
// Render the file.
gulp.src('src/template.html')
.pipe(template({
scripts: appJsFiles,
styles: ['style1.css', 'style2.css', 'style3.css']
}))
.pipe(gulp.dest(config.build_dir))
.on('end', cb);
});
});