Task never defined: undefined - gulp

I used a similar configuration to another project (with more tasks) but I'm not sure what I'm missing here to get this error:
AssertionError [ERR_ASSERTION]: Task never defined: undefined
So would like to use Gulp 4 and use 3 tasks (build HTML, minify JavaScript, and create a server). I'm dividing it into 2 processes: dev and build.
const gulp = require('gulp');
const jsmin = require('gulp-jsmin');
const browserSync = require('browser-sync').create();
function jsMinify () {
return gulp.src('./src/**/*.js')
.pipe(jsmin())
.pipe(gulp.dest('./dist'))
}
function buildHTML () {
return gulp.src('./src/html/**/*.html')
.pipe(gulp.dest('./dist'))
}
function buildServe () {
browserSync.init({
server: {
baseDir: "./dist/",
},
port: 9001
});
}
function watch (){
browserSync.init({
server: {
baseDir: "./src/",
},
port: 8080
});
gulp.watch('./src/**/*.html').on('change', browserSync.reload);
gulp.watch('./src/**/*.js').on('change', browserSync.reload);
};
const dev = gulp.series(watch);
const build = gulp.series(
gulp.parallel(buildHTML, jsMinify),
buildServe()
);
exports.dev = dev;
exports.build = build;
Am I missing something about Gulp 4 or this code should run without any issue?

This is an error:
const build = gulp.series(
gulp.parallel(buildHTML, jsMinify),
buildServe() // <= error here, don't call the function just list it like below
);
const build = gulp.series(
gulp.parallel(buildHTML, jsMinify),
buildServe // <= removed ()
);
gulp.series() arguments are function names or task names. By using buildServe() I imagine that it is returning undefined hence your error message about undefined never being defined as a task. I hope that makes sense.
[I haven't been able to test this change yet to see if it fixes your issue, but I don't see any other problems in your code.]

Related

Gulp 4 array as source

I'm attempting to upgrade to Gulp 4 in an existing project. I have created a task called vendor with the intent of concatenating and minifying global javascript packages. Unfortunately I'm receiving an error when compiling with the following code:
function vendor() {
const source = [
'./node_modules/#popperjs/core/dist/umd/popper.js',
'./node_modules/bootstrap/dist/js/bootstrap.js',
'./node_modules/slick-carousel/slick/slick.js'
];
return src(source)
.pipe(changed(source))
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(rename({
extname: '.min.js'
}))
.pipe(dest('./dist/js/'))
}
exports.build = series(parallel(vendor, js));
The error that I'm receiving is TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type object.
This on my side functional (with path that I had on my project). Can you try this task and see if it works well ?
const {src, dest, task} = require("gulp");
const stripDebug = require('gulp-strip-debug');
const logger = require('node-color-log');
const uglify = require('gulp-uglify');
const source = [
'./node_modules/#popperjs/core/dist/umd/popper.js',
'./node_modules/bootstrap/dist/js/bootstrap.js',
'./node_modules/slick-carousel/slick/slick.js'
];
const jsDest = "./dist/js/";
function compressJs(callback) {
logger.color('yellow').log(`Removing console.log() and uglifying js from ${source} to: ${jsDest}`);
src(source)
.pipe(stripDebug())
.pipe(uglify())
.pipe(dest(`${jsDest}`))
.on('end', function () {
callback();
});
}
const Js = task('compress:js', compressJs);
exports.Js = Js;

Trying to start server with Gulp and it throw error

I'm trying to run sever and I get this assertion error. I've uninstalled node and NPM and reinstalled again also I tried many steps and suggested solutions here but it doesn't fit with my problem.
AssertionError [ERR_ASSERTION]: Task never defined: node_modules/scss/bootstrap.scss
at getFunction (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\helpers\normalizeArgs.js:15:5)
at map (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\arr-map\index.js:20:14)
at normalizeArgs (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\helpers\normalizeArgs.js:22:10)
at Gulp.series (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\series.js:13:14)
at C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\gulpfile.js:7:26
at sass (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:422:14)
at runBound (domain.js:435:12)
at asyncRunner (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:75:11)
This's my code
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('sass', async function () {
return gulp.src(gulp.series('node_modules/scss/bootstrap.scss', 'src/scss/*.scss'))
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream());
});
gulp.task('js', async function () {
return gulp.src(gulp.series('node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/popper.min.js'))
.pipe(gulp.dest('src/js'))
.pipe(browserSync.stream());
});
gulp.task('serve', async function () {
browserSync.init({
server: "./src",
});
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], 'sass');
gulp.watch("src/*.html").on('change', browserSync.reload);
})
gulp.task('default', gulp.series(gulp.parallel('sass', 'js', 'serve')));
The error is coming from the sass and js tasks. You are wrapping your sources in gulp.series. So Gulp is trying to run your sources as tasks.
They just need to be in an array [] like in the watch task.
Just change:
gulp.task('sass', async function () {
return gulp.src(gulp.series('node_modules/scss/bootstrap.scss', 'src/scss/*.scss'))
to:
gulp.task('sass', async function () {
return gulp.src(['node_modules/scss/bootstrap.scss', 'src/scss/*.scss'])
and then the same format in the js task
The second error (coming from your watch task) is because you need to wrap the tasks you are watching in either series or parallel. Even when theres only one task So change:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], 'sass');
to:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));

How to use gulp.series in gulp 4?

Have a super simple gulp file where I want to run some basic gulp tasks in sequence one after the other.
I can't seem to get this running in Gulp v4. Had something similar in Gulp v3 using run-sequence instead of gulp.series()
const gulp = require("gulp");
const clean = require('gulp-clean');
gulp.task('clean-app', async () => {
return (gulp.src('./dist/app', {read: true, allowEmpty: true})
.pipe(clean()));
});
gulp.task('clean-tests', async () => {
return ( gulp.src('./dist/tests', {read: true, allowEmpty: true})
.pipe(clean()));
});
gulp.task('all-tasks', gulp.series('clean-app', 'clean-tests'));
The individual gulp tasks clean-app and clean-tests run fine individually.
However, when I use gulp all-tasks i get the below error
gulp all-tasks
[17:50:51] Using gulpfile ~\IdeaProjects\my-app\gulpfile.js
[17:50:51] Starting 'all-tasks'...
[17:50:51] Starting 'clean-app'...
[17:50:51] Finished 'clean-app' after 10 ms
[17:50:51] The following tasks did not complete: all-tasks
[17:50:51] Did you forget to signal async completion?
Both clean-app and clean-tests return streams which I thought would be sufficient.
Have tried using gulp4-run-sequence but i get the same error.
Want to be able to run gulp all-tasks such that clean-tests is executed after clean-app has completed successfully.
depending on the official documents here try to run cb() in your tasks like that
const gulp = require("gulp");
const clean = require('gulp-clean');
gulp.task('clean-app', (cb) => {
gulp.src('./dist/app', {read: true, allowEmpty: true}).pipe(clean());
cb();
});
gulp.task('clean-tests', (cb) => {
gulp.src('./dist/tests', {read: true, allowEmpty: true}).pipe(clean());
cb();
});
gulp.task('all-tasks', gulp.series('clean-app', 'clean-tests'));

struggling with "did you forget to signal async completion?"

I know this can be duplicate question, but i have almost spend 1 day to make it working.
so, i have gulpfile.js like here
const gulp = require('gulp');
const javascriptObfuscator = require('gulp-javascript-obfuscator');
gulp.task("javascriptObfuscator", (done) => {
gulp.src('./js/**/*.js', {base: './'})
.pipe(javascriptObfuscator())
.pipe(gulp.dest('./'))
done();
});
so when i'm running this file in azure pipeline under "Gulp task", facing this error "did you forget to signal async completion?"
try to add return before gulp.src as following:
const gulp = require('gulp');
const javascriptObfuscator = require('gulp-javascript-obfuscator');
gulp.task("javascriptObfuscator", (done) => {
return gulp.src('./js/**/*.js', {base: './'})
.pipe(javascriptObfuscator())
.pipe(gulp.dest('./'))
done();
});
will help if you watch:
title:How to Upgrade to Gulp 4
link: https://www.youtube.com/watch?v=2HpNiyimo8E

Gulp postpone error occurring whilst running run-sequence to end of tasks list

I have a Gulpfile for a Laravel application. The unit tests for the application are executed via Gulp. To execute the tests correctly the following tasks should run in a synchronous order (via run-sequence).
Back-up current .env file
Set .env.testing as current .env file
Create a database the unit tests will use
Run the migrations
Execute the unit tests
Drop the test database
Restore the back-up of the .env file we made in the beginning
This works fine, however, there is a problem when PHPUnit executes and one or more unit tests have failed. If this happens the sequence is broken and as a result switching back to the original environment doesn't happen and we're stuck at the testing environment.
That's why I would like to postpone the PHPUnit error to the end of the sequence. This way the environment gets restored but, for CI purposes, the build will still be marked as failed.
I've tried something myself with gulp-if and gulp-fail. The gulp-fail code is executed but the run-sequence keeps executing anyway. I don't know how to fix this.
Here's what I tried to catch the unit tests failure:
.on('error', function() {
didTestsFail = true;
this.emit('end');
})
and with this task I'm trying to mark the build as failed:
gulp.task('error-when-tests-failed', function() {
return gulp.src('./')
.pipe(gulpIf(didTestsFail, fail()));
});
So basically, I'm using a global var to determine whether the unit tests have failed or not.
Here's the complete Gulpfile:
var gulp = require('gulp'),
del = require('del'),
rename = require('gulp-rename'),
exec = require('gulp-exec'),
foreach = require('gulp-foreach'),
gulpSequence = require('gulp-sequence').use(gulp),
plumber = require('gulp-plumber'),
phpunit = require('gulp-phpunit'),
fail = require('gulp-fail'),
gulpIf = require('gulp-if'),
db = require('gulp-db')({
user: 'user',
password: 'some_password',
host: 'some_host',
port: 'some_port',
dialect: 'mysql'
}),
didTestsFail = false;
gulp.task('tests', function(cb) {
gulpSequence(
'back-up-active-env',
'switch-testing-env',
'create-test-database',
'migrate',
'phpunit',
'drop-test-database',
'restore-active-env',
'error-when-tests-failed'
)(cb);
});
gulp.task('phpunit', function(done) {
var options = {
debug: false,
statusLine: true
};
return gulp.src('phpunit.xml')
.pipe(plumber())
.pipe(phpunit('./vendor/bin/phpunit', options))
.on('error', function() {
didTestsFail = true;
this.emit('end');
});
});
gulp.task('back-up-active-env', function() {
del('env.temp');
return gulp.src('.env')
.pipe(plumber())
.pipe(rename('.env.temp'))
.pipe(gulp.dest('./'));
});
gulp.task('migrate', function() {
return gulp.src('./')
.pipe(plumber())
.pipe(exec('php artisan migrate'));
});
gulp.task('switch-testing-env', function() {
del('.env');
return gulp.src('.env.testing')
.pipe(plumber())
.pipe(rename('.env'))
.pipe(gulp.dest('./'))
.pipe(exec('php artisan config:cache'));
});
gulp.task('restore-active-env', function() {
del('.env');
return gulp.src('.env.temp')
.pipe(plumber())
.pipe(rename('.env'))
.pipe(gulp.dest('./'))
.pipe(exec('php artisan config:cache'));
});
gulp.task('error-when-tests-failed', function() {
return gulp.src('./')
.pipe(gulpIf(didTestsFail, fail()));
});
gulp.task('create-test-database', db.create('test_db'));;
gulp.task('drop-test-database', db.drop('test_db'));
After some fiddling around I figured out how I can make it work:
There is no need for the error-when-tests-failed task, it was kind of hacky anyway.
You can pass a callback to the gulpSequence function, in this callback you can check if the didTestsFail var is true, if so you can throw an error. The code looks as follows:
gulp.task('tests', function(done) {
gulpSequence(
'back-up-active-env',
'switch-testing-env',
'create-old-test-database',
'create-new-test-database',
'migrate',
'phpunit',
'drop-old-test-database',
'drop-new-test-database',
'restore-active-env',
function() {
if (didTestsFail) {
throw new Error('One or more unit tests failed!');
}
done();
}
);
});