How to build a gulp build for a multi-page site?

Question

JavaScript

I searched Google and so far I have only this build option:
1) the project connects main.js (my js code) and libs.js (all plugins and libraries)

The problem is that I have 1 js file and there are a lot of pages. And as a result, it turns out that some pages connecting main.js conflict or simply load extra js code.
How will it be more correct to connect and work with js code when the project is multi-page?
Separately, create nav.js, register.js with your hands and then connect it where you need it, not a variable.

Since I use Gulp, I would like to write such an assembly that:
1) correctly included the necessary js code and there were no conflicts
2) created a libs folder, and transferred folders with libraries and plugins there, and not everything into one minified libs.js file

Tell me, advise or share your finished assembly. In the meantime, I will also look for a solution

Answer 1

Making a common bundle or splitting the code is an eternal dilemma. Usually on the site, the general bundle is not very heavy. Therefore, it is written taking into account the use on all pages. If it's not some kind of spa

Answer 2

I used to make separate files for each type of page: Category, Product Card, Cart, etc.
Now I came to one (more precisely 2) files: the first one is libraries, the second one is my own JS.
In the source code, these are separate module files that are collected by gulp into one obfuscated file.
I connect modules for each type of page (except for those common to the entire site).
I do it like this:

// общие для всех страниц модули
$(() => {
  site.cart.drawCart();
  site.theme.init();
  site.common.init();
  site.forms.init();
  site.cart.init();
  site.search.init();
  site.theme.initHorizontalSliders();

  // модули в зависимости от типа страницы
  switch (method) {
    case 'content':
      switch (pageId) {
        case 0:
          break;
        default:
      }
      break;
    case 'category':
      site.category.init();
      break;
    case 'object':
      site.object.init();
      site.category.init();
      break;
    case 'cart':
      site.cart.initCartPage();
      break;
    case 'purchasing_one_step':
      break;
    default:
  }
});

As a result, we get one file and the script execution time decreases.
The task in gulp is something like this:

gulp.task('uglify:js', () => {
  return gulp.src(path.src_js + '/**/*.js')
      .pipe(concat('theme.min.js'))
      .pipe(babel({
        presets: ['@babel/env']
      }))
      .pipe(uglify())
      .pipe(rename({ basename: dateNow}))
      .pipe(gulp.dest(path.dist_js_theme));
});

Answer 3

https://github.com/agragregra/OptimizedHTML-4

Answer 4

Use webpack, where all the questions of beginners are resolved for 5 years ahead