Шаблон проекта для быстрого старта.
с помощью yarn (быстрее)
yarn install
или с помощью npm (медленнее):
npm install
npm start
3. Открыть следующий URL - http://localhost:9000/.
npm start
npm run build
npm run zip
Nunjucks - мощный шаблонизатор с синтаксисом а-ля jinja2, который позволяет создавать качественный, легкоподдерживаемый HTML-код.
Nunjucks-шаблоны находятся в src/templates/.
Данные, которые могут быть использованы в нескольких местах, следует складывать в файл global-data.json, который находится в корне проекта. После этого к ним можно обращаться в шаблонах:
<p>Some title: {{ someData[0].title }}</p>
Шаблоны страниц, которые должны быть скомпилированы в папку build/, кладем в папку src/templates/pages
Кастомные фильтры, макросы и функции складываем в соответствующих файлах в src/templates/lib.
Так называемые инклуды создаем в src/templates/parts с префиксом _. Например, src/templates/parts/_sidebar.nunj.
Для эффективного применения шаблонизатора см. примеры в стартовом проекте, а также документацию.
Для настройки синтаксиса в редакторах (Sublime, Webstorm) скачиваем плагин для шаблонизатора Twig и настраиваем открытие файлов с расширением .nunj с подстветкой Twig по умолчанию.
В SP.Starter настроен Webpack HMR. По умолчанию при изменении в JS файле происходит замена этого модуля и всех его зависимостей.
Важно! Для корректной работы необходимо правильно обрабатывать side-эффекты, которые генерирует ваш код.
Например, если есть код, добавляющий обработчик на событие клика:
document.body.addEventListener('click', this.someMethod);
То прямо в коде необходимо добавить следующую инструкцию для Webpack:
// Удаляем обработчик события, чтобы после повторного исполнения предыдущего кода этот обработчик не был добавлен повторно.
if (module.hot) {
module.hot.dispose(() => {
document.body.removeEventListener('click', this.someMethod);
});
}
В противном случае, обработчик на клик будет добавляться при каждом обновлении, генерируемом с помощью HMR.
Таким же образом надо поступать и с изменением DOM-дерева:
var sideEffectNode = document.createElement("div");
sideEffectNode.textContent = "Side Effect";
document.body.appendChild(sideEffectNode);
Добавляем:
// Удаляем <div>, добавленный в DOM, чтобы после исполнения предыдущего кода этот <div> не был добавлен повторно.
if (module.hot) {
module.hot.dispose(function() {
sideEffectNode.parentNode.removeChild(sideEffectNode);
});
}
В Стартере существует следующая структура SASS-файлов:
/sass/
/lib/ // Библиотеки и миксины
/pages/ // Стили для страниц проекта
_main.sass // Стили для главной страницы
/parts/ // Части или компоненты проекта
_controls.sass // Контроллы (кнопки, инпуты, чекбоксы, селекты)
_footer.sass // SASS-реализация футера
_popup.sass // SASS-реализация попапа
_constants.sass // Переменные и константы
_fonts.sass // Подключаемые шрифты
_global.sass // Стили глобальных блоков
_layout.sass // Стили лэйаута
_reset.sass // CSS-reset и обнуление стилей
screen.sass // Основной файл, который компилируется в screen.css
Для каждой страницы создается отдельный файл в папке pages. Для каждой части или компонента создается отдельный файл в папке parts.
Все подключаемые файлы должны начинаться с одного подчеркивания (_).
На проектах можно использовать бутстрапоподобную сетку из 12 колонок.
Примеры использования сетки см. в index.nunj, а также на сайте бутстрапа.
Если нужно например сделать сетку из 10 колонок, а не из 12, то можно подправить соответствующие миксины в _layout.sass. Брейкпоинты можно изменять в _variables.sass
В стартовом проекте настроена возможность создания SVG-спрайтов с помощью gulp-svgstore, поэтому SVG на сайт лучше добавлять следующим способом:
<svg><use xlink:href="#icon-some-vector-image"></use></svg>
При этом SVG-файл some-vector-image.svg должен находиться в папке src/media/svg/. Такому элементу необходимо задать width и height в стилях. Ему также можно менять fill, stroke при условии, что в исходном файле some-vector-image.svg у элемента не заданы такие же атрибуты (fill и stroke).
Обратите внимание на то, что при подключении svg-спрайта используется #icon- префикс в пути до спрайта: #icon-some-vector-image (фактически будет использован some-vector-image.svg).
Для создания простого спрайта из изображений нужно использовать миксин
+s(name)
Следующий миксин для спрайта под ретину. Для него необходимо использовать 2 изображения: простое и в 2 раза больше. Например: sp.png и [email protected].
+sr(name)
Изображения, которые собираются в спрайт, должны быть в формате .png и находится в директории media/img/sprites/.
Внимание! Изображения, которые будут инлайниться, должны находится в директории src/media/img/inline.
Плагин postcss-assets позволяет инлайнить изображения прямо в код в Base64 кодировке (или в виде кода в случае с SVG):
background: inline('sp.png')
Так же позволяет подставить размеры картинки:
width: width('sp.png')
height: height('sp.png')
background-size: size('sp.png')
<img src={% inline 'image.png' %} alt="Some image" />