Requried is not defined, after migrating from Gulp 3 to 4 - angularjs

Question

I have a project which used Gulp 3 + Node 11 (The project is AngularJS with the basic webpack + babel etc ...).
The need arose to migrate to Gulp 4 + Node 12. I changed the syntax from Gulp 3 to 4, the command "gulp build" is running, the console appears that everything is ok.
But when I try to access the application it says that:
Uncaught ReferenceError: require is not defined
at eval (eval at globalEval (jquery.js:2)
This error is repeated with other libs as well.
Below a part of my gulp.js, the calls part, probably the error is here. I think I'm getting complicated in this business of having to force sync on gulp 4, which I didn't have on Gulp 3.
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var simplevars = require('postcss-simple-vars');
var nested = require('postcss-nested');
var mqPacker = require('css-mqpacker');
var cssnano = require('cssnano');
var cssimport = require('postcss-import');
var usemin = require('gulp-usemin');
var fs = require('graceful-fs');
var open = require('open');
var rename = require('gulp-rename');
var minifyCss = require('gulp-clean-css');
// var gulpsync = require('gulp-sync')(gulp);
var express = require('express');
var uglify = require('gulp-uglify');
// /* ES6 */
var replace = require('gulp-replace');
var gulpif = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var watchify = require('watchify');
var browserify = require('browserify');
var babelify = require('babelify');
var _ = require('lodash');
var through = require('through');
var livereload = require('gulp-livereload');
var fn = require('gulp-fn');
var notify = require('gulp-notify');
var templateCache = require('gulp-angular-templatecache');
function ErrorHandler() {
var args = Array.prototype.slice.call(arguments);
notify.onError({
title: "Compile Error",
message: "<%= error.message %>"
}).apply(this, args);
this.emit('end');
};
var envConfig = process.env.CONFIG || 'development';
var filename = envConfig + '.json';
var settings = JSON.parse(fs.readFileSync('./config/' + filename, 'utf8'));
var isMinify = !!settings.minify;
settings.buildVersion = new Date().getTime();
var PORT = process.env.PORT || 3000;
var PATH = {
js: {
src: 'src/**/*.js',
dest: 'build'
},
styles: {
src: 'src/core/styles/common.css',
srcWatch: 'src/**/*.css',
dest: 'build/core/styles/'
},
images: {
src: ['src/**/*.png', 'src/**/*.jpg', 'src/**/*.svg', 'src/**/*.pdf', 'src/**/*.ico'],
dest: 'build'
},
fonts: {
src: ['src/core/fonts/**/*.eot', 'src/core/fonts/**/*.ijmap', 'src/core/fonts/**/*.svg', 'src/core/fonts/**/*.ttf', 'src/core/fonts/**/*.woff', 'src/core/fonts/**/*.woff2'],
dest: 'build'
},
fontsAwesome: {
src: ['node_modules/font-awesome/fonts/*.*'],
dest: 'build/lib/fonts'
},
html: {
src: 'src/**/*.html',
dest: 'build'
},
usemin: {
src: 'src/index.tmpl',
dest: 'build'
},
windows: {
srcPaste: '../../../inetpub/wwwroot/app',
srcCopy: 'build/**/*.*',
srcWebConfig: 'web.config'
}
};
function replaceKeys() {
return replace(/(#{2}[A-z,0-9]+)/g, function (key) {
return settings[key.slice(2)];
});
}
async function compileTemplateIndex() {
gulp
.src(PATH.usemin.src)
.pipe(rename('index.html'))
.pipe(replaceKeys())
.pipe(usemin({
assetsDir: '.',
css: ['concat'],
js: ['concat']
}))
.pipe(gulp.dest(PATH.usemin.dest));
}
async function copyFonts() {
gulp
.src(PATH.fonts.src)
.pipe(gulp.dest(PATH.fonts.dest));
}
async function copyFontsAwesome() {
gulp
.src(PATH.fontsAwesome.src)
.pipe(gulp.dest(PATH.fontsAwesome.dest));
}
async function copyImages(done) {
gulp
.src(PATH.images.src)
.pipe(gulp.dest(PATH.images.dest));
done()
}
async function copyImagesUI() {
gulp
.src('bower_components/jquery-ui/themes/base/images/**/*')
.pipe(gulp.dest('build/lib/css/images'));
}
async function compileHtml() {
return gulp.src(PATH.html.src)
.pipe(replaceKeys())
.pipe(templateCache({
standalone: true
}))
.pipe(gulp.dest(PATH.html.dest));
}
async function compilePostCss() {
var processors = [
cssimport,
simplevars,
nested,
mqPacker,
autoprefixer
];
if ( isMinify ) processors.push(cssnano({
discardComments: {
removeAll: true
},
zindex: false
}));
return gulp
.src(PATH.styles.src)
.pipe(postcss(processors))
.pipe(gulp.dest(PATH.styles.dest));
}
function transformKeys(file) {
var data = '';
return through(write, end);
function write(buf) {
data += buf
}
function end() {
data = data.replace(/(#{2}[A-z,0-9]+)/g, function (key) {
return settings[key.slice(2)];
})
this.queue(data);
this.queue(null);
}
}
async function compileEs6() {
compileEs6_Bundle(false, './src/app.js', 'app.js');
// compileEs6_Bundle(false, './src/components/components.module.js', 'components.js');
// compileEs6_Bundle(false, './src/modules/modules.module.js', 'modules.js');
}
function compileEs6_watch() {
compileEs6_Bundle(true, './src/app.js', 'app.js');
// compileEs6_Bundle(true, './src/components/components.module.js', 'components.js');
// compileEs6_Bundle(true, './src/modules/modules.module.js', 'modules.js');
}
function compileEs6_Bundle(watch, src, dest) {
var bro;
var src = src || './src/app.js';
var dest = dest || 'app.js';
if (watch) {
livereload.listen();
bro = watchify(browserify(_.assign(watchify.args, {
entries: [src],
debug: true
})));
bro.on('update', function (file) {
console.log(file + ' changed');
rebundle(bro);
});
} else {
bro = browserify(src, {
debug: true
});
}
bro.transform(babelify.configure({
compact: false,
presets: ['#babel/env'],
}));
bro.transform(transformKeys);
function rebundle(bundler) {
return bundler.bundle()
.on('error', ErrorHandler)
.pipe(source(dest))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(sourcemaps.write())
.pipe(gulpif(isMinify,
uglify({
mangle: false
})
))
.pipe(gulp.dest('./build'))
.pipe(gulpif(watch, fn(
function () {
livereload.reload();
openServer();
}
)));
}
return rebundle(bro);
}
async function watch() {
livereload.listen();
function livereloadNotify(e) {
livereload.changed(e.path);
}
var onChanged = _.debounce(livereloadNotify, 600);
/* listen js files */
compileEs6_watch();
gulp.watch(PATH.images.src, gulp.series(['copy-images'])).on('change', onChanged);
gulp.watch(PATH.styles.srcWatch, gulp.series(['postcss'])).on('change', onChanged);
gulp.watch(PATH.html.src, gulp.series(['html'])).on('change', onChanged);
gulp.watch(PATH.usemin.src, gulp.series(['compile-template-index'])).on('change', onChanged);
}
async function webserver() {
var app = express();
app.use(express.static('build'));
var server = app.listen(PORT, function () {
console.log('Listening on port %d', PORT);
});
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/build/index.html');
});
}
function openServer() {
//open('http://localhost:'+ PORT +'/');
//openServer = function () {};
}
function copyFilesToBuildFolder() {
function rmDir(dirPath) {
try { var files = fs.readdirSync(dirPath); }
catch(e) { return; }
if (files.length > 0){
for (var i = 0; i < files.length; i++) {
var filePath = dirPath + '/' + files[i];
if (fs.statSync(filePath).isFile()){
fs.unlinkSync(filePath);
} else {
rmDir(filePath);
}
}
}
fs.rmdirSync(dirPath);
}
rmDir(PATH.windows.srcPaste);
gulp
.src(PATH.windows.srcCopy)
.pipe(gulp.dest(PATH.windows.srcPaste));
gulp
.src(PATH.windows.srcWebConfig)
.pipe(gulp.dest(PATH.windows.srcPaste));
}
gulp.task('compile-es6', compileEs6);
gulp.task('compile-template-index', compileTemplateIndex);
gulp.task('copy-images', copyImages);
gulp.task('copy-fonts', copyFonts);
gulp.task('copy-fonts-awesome', copyFontsAwesome);
gulp.task('copy-images-ui', copyImagesUI);
gulp.task('html', compileHtml);
gulp.task('postcss', compilePostCss);
gulp.task('watch', watch);
gulp.task('server', webserver);
gulp.task('copy-files-to-build-folder', copyFilesToBuildFolder);
gulp.task('build', gulp.series(['copy-fonts','copy-fonts-awesome','copy-images-ui','postcss','copy-images','compile-template-index','html','compile-es6']));
gulp.task('serve', gulp.series(['build','server','watch']));
// gulp.task('build-sv-windows', gulpsync.sync(['build', 'copy-files-to-build-folder']));