Появилась необходимость сверстать десяток страниц. Давно не верстал. Когда-то у меня был свой стартер-кит на Галпе (PUG+SCSS итд). Но теперь неохота им пользоваться. На свой идеальный webpack-конфиг времени нет. Попробовал NUXT.JS, но он долго компилит изменения, для скоростной верстки неудобен.
Нужна хорошая, поддерживаемая система верстки и сборки (желательно на Webpack, можно и на Gulp) со следующими возможностями.
- HTML шаблонизатор (НЕ pug!), максимально схожий с обычным html-синтаксисом
- SCSS-препроцесор
- Система копирования файлов, картинок, перезапись путей, оптимизация, сжатие, постпроцессоры
- Возможность быстро подключить нужную библиотеку, шрифт, (буду много работать с VUE, но страницы статические, то есть в режиме библиотеки)
- Простота использования, простота конфигурирования, хорошая документация.
- Большая скорость работы (чтобы не думал по 10 сек при каждом пересохранении)
- Слежка, лайв-релоад,
Webpack + Gulp, шаблонизатор Twig и препроцессор Sass(с Scss синтаксисом). И поддержка многих новых возможностей с помощью PostCss.
Заточен под вёрстку, полный фарш с минифаерами, сборкой спрайтов, оптимизацией картинок, шрифты, js, и куча полезных миксинов для стилей.
Всё настраиваемо и интуитивно понятно, плюс подробный readme. Посмотреть можно вот здесь.
Николай Козлов, да, забыл вам сказать, что если переключаетесь с html на twig нужно в файле вебпак конфига закомментить вызов htmlwebpackplugin в самом низу конфига.
Николай Козлов, это делает PostCSS плагин Андрея Ситника webp-in-css. Чтобы его отключить нужно только удалить в head вот этот маленький скрипт:
<!-- To WebP or not to WebP. That is the question.
https://github.com/ai/webp-in-css#readme -->
<script>
var i = new Image;
i.onload = i.onerror = function() {
document.body.classList.add(i.height ? "webp" : "no-webp")
};
i.src = "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";
</script>
А так же в файле postcss.config.js в корне проекта удалить плагин webp-in-css:
На будущее я в конфиге прописал ссылки на доки плагинов, там в принципе кроме этого таких наглых не осталось, но перейти почитать какой за что отвечает лишним не будет.
Николай Козлов, вообще расчет на то, что браузерам с движком blink доля рынка которых 80-90% было бы логично отдавать самый предпочтительный для них формат. Но тут уж на ваше усмотрение. Если что-то не нравится - можно отключить. По сути вы если не хотите из проекта в проект что-то переопределять базовое, то просто сделайте форк измените под себя и используйте свою версию. У меня всё таки изначально заточено под любую ситуацию, чтобы человек настроил и пользовался.
Средний
Простой
Сложный
