Задать вопрос

Как собрать сборку gulp для многостраничного сайта?

Обыскал гугл и пока у меня только такой вариант сборки:
1) проект подключает main.js(мой js код) и libs.js(все плагины и библиотеки)

Проблема в том, что у меня 1 js файл а страниц много. И в итоге получается так, что некоторые страницы подключая main.js конфликтуют или просто подгружают лишний js код.
Как будет правильней подключать и работать c js кодом когда проект многостраничный?
Отдельно создавать руками nav.js, register.js и потом подключать где нужно не варик.

Так как использую Gulp, хотелось бы написать такую сборку, которая:
1) правильно подключала нужный js код и не было конфликтов
2) создавала libs папку, и туда переносила папки с библиотеками и плагинами, а не все в один минифицированный libs.js файл

Подскажите, посоветуйте или поделитесь своей готовой сборкой. А пока я тоже буду искать решение
  • Вопрос задан
  • 1378 просмотров
Подписаться 8 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 4
@AleksRap
Делать общий бандл или разделять код - вечная дилема. Обычно на сайте общий бандл не сильно тяжёлый. Поэтому его пишут с учётом использования на всех страницах. Если это не какой нибудь spa
Ответ написан
Комментировать
@alezzz
Раньше делал отдельные файлы под каждый тип страницы: Категория, Карточка товара, Корзина и тп.
Сейчас пришел к одному (точнее 2-м) файлам: первый - библиотеки, второй - свой JS.
В исходниках - это отдельные файлы-модули, которые gulp-ом собираются в один обсуфицированный файл.
Модули подключаю для каждого типа страницы свои (кроме общих для всего сайта).
Делаю так:
// общие для всех страниц модули
$(() => {
	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:
	}
});

В итоге получаем один файл и время выполнения скриптов уменьшается.
Задание в gulp примерно такое:
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));
});
Ответ написан
Комментировать
SpiderPigAndCat
@SpiderPigAndCat
занимаюсь салообразованием
Ответ написан
Комментировать
MDiMaI666
@MDiMaI666
Талантливый программист
Использовать вебпак, там все вопросы новичков решены на 5 лет вперёд
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы