Is it correct to split js code into gulp like this?

Question

JavaScript

In general, there is such a project structure:

src
--pages
----lk-index
----index
------index.js
------index.scss
------index.pug
--components
----footer
----header
------header.js
------header.scss
------header.pug
--static
----scripts
------scripts.js

This is what the code looks like in components and pages:

index.js

index()
function index () {
}

header.js

header()
function header () {
}

As a result, I combine everything into one file:

const { src, dest } = require('gulp')
const concat = require('gulp-concat')

module.exports = function scripts () {
    return src(['./app/pages/*/*.js', './app/components/*/*.js', './app/static/scripts/scripts.js'])
        .pipe(concat())
        .pipe(dest('dist/js'))
}

And when built, scripts.js looks like this:

/* Очень много функций из компонентов и страниц */
index()
function index () {
}

header()
function header () {
}

/* Скрипты из самого файла scripts*/

alert('Hello world')

Is it normal to do so? It's just that all this goes to the backend and I want the backend to work normally with build files.

(Example: There is a noUiSlider plugin in the filter and there is a reset button, and a function that resets everything, and in the future the backend should expand the reset function to change the content, it will also add its own, for example, subscribe to events from the noUiSldier itself in the already written code and will filter content)