Какой есть сборщик простого SPA?

Question

[Delakey Blackhole]

Периодически пилю небольшие проекты, в которых переодически нужно делать страницки на 3000 + строк, что есть очень не удобно при работе с такой большой страничкой, возник вопрос есть ли какой сборщик статических страничек? Ангуляр и реакт не подходят из-за своей нагруженности, грубо говоря мне нужно просто собирать статическую html страничку на которой ей очень много текста по типу "продающих одно страничных сайтов"

Comments

[Сергей delphinpro]

Любой шаблонизатор (pug, twig, slim) в виде плагина для gulp
Или даже тупой gulp-rigger который который просто вставляет отдельные файлы в указанное место.

Answer 1

[Sergey Ch]

Для сборки используйте gulp. Плагины дадут разную степень автоматизации сборки и разработки. Использование препроцессоров с плагином gulp-file-include, даст возможность делить страницу на блоки в соответствие с БЭМ. Блоки можно использовать в других проектах, что увеличит скорость верстки.

Comments

[kiberlain]

Сергей, добрый день! А может заодно мне подскажете как в gulp не просто минифицировать все файлы, а брать их содержимое и вставлять напрямую в готовый html? Минимизированный css в тэг style в начале страницы, скрипты соответственно внизу в script

Какие могут быть недостатки у такого подхода?

Я сейчас вот такой скрипт использую https://qbin.io/2crz939

[Sergey Ch]

Если я вас правильно понял, то прогонять код через gulp file include

/* Задача сборки из отдельных блоков верстки страниц в папку build */

gulp.task("html", function () {
gulp.src(["./template/*.html"])
.pipe(plumber())
.pipe(fileinclude({
prefix: "@@",
basepath: "./template"
}
))
.pipe(gulpif(argv.production, gulpHtmlVersion(
{
suffix: ['css'] /*версия сборки запускается для production*/
}
)))
.pipe(gulp.dest("./" + buildFolder))
.pipe(server.reload({stream: true}));
});

А в html файле вставляем директивы для подключения блоков
@@include('blocks/page-header.html', {
"page-title": "Документы "
})
@@include('blocks/document.html')

Не использовал пока jade-pug но если не ошибаюсь данный препроцессор тоже позволяет собираться страницу из отдельных блоков

Answer 2

[Максим Тимофеев]

SPA и одностраничник - это разные вещи. Что именно нужно собирать?