Вы можете начать разработку проекта с помощью некоторых доступных шаблонов, которые можно установить через Yeti Launch или Foundation CLI . Вы можете начать с нового проекта, используя эти шаблоны, используя систему сборки Gulp для обработки Sass, JavaScript, копирования файлов и т. Д.
Основной шаблон
Базовый шаблон — это что-то вроде шаблона SASS, который включает в себя плоскую структуру каталогов и компилирует только файлы SASS, и этот простой шаблон хорошо иметь при использовании только SASS. Вы можете использовать базовый шаблон, используя Yeti Launch или Foundation CLI, используя следующую команду:
$ foundation new --framework sites --template basic
Чтобы настроить это, сначала запустите npm install , bower install и используйте команду npm start для его запуска. Вы также можете скачать файлы шаблонов с Github .
ZURB шаблон
Он представляет собой сочетание CSS / SCSS, JavaScript, шаблона Handlebars, структуры разметки, сжатия изображений и использует обработку SASS. Вы можете использовать шаблон ZURB, используя Yeti Launch или Foundation CLI, используя следующую команду:
$ foundation new --framework sites --template zurb
Чтобы запустить этот шаблон, выполните те же шаги, которые указаны в базовом шаблоне. Вы также можете скачать файлы шаблонов с Github .
Копирование активов
Вы можете скопировать содержимое в папку src / assets, используя Gulp, в которой активами будет папка вашего проекта. Здесь важно то, что файлы SASS, файлы JavaScript и изображения не будут включены в этот процесс копирования активов, поскольку они будут иметь собственный процесс копирования содержимого.
Компиляция страницы
Вы можете создавать HTML-страницы в трех папках, а именно: страницы , макеты и партиалы, которые находятся в каталоге src / . Вы можете использовать компилятор плоских файлов Panini, который создает макеты для страниц с использованием шаблонов, страниц, HTML-частей. Этот процесс может быть выполнен с использованием языка шаблонов Handlebars .
SASS Сборник
Вы можете скомпилировать SASS в CSS, используя Libsass, и основной файл SASS будет храниться в src / assets / scss / app.scss, а также вновь созданные пароли SASS будут храниться в самой этой папке. Вывод CSS будет похож на обычный CSS, который находится во вложенном стиле. Вы можете сжать CSS с помощью clean-css и удалить неиспользуемый CSS из таблицы стилей, используя UnCSS .
Компиляция JavaScript
Файлы JavaScript будут храниться в папке src / assets / js вместе с Foundation, и все зависимости будут связаны вместе в файл app.js. Файлы будут связаны вместе, как указано в следующем порядке:
- Зависимости фонда.
- Файлы будут храниться в папке src / assets / js .
- Файлы объединены в один файл с именем app.js.
Сжатие изображения
По умолчанию все изображения будут храниться в папке assets / img в папке dist . Вы можете сжать изображения при сборке для производства, используя gulp-imagemin, который поддерживает файлы JPEG, PNG, SVG и GIF.
BrowserSync
Вы можете создать сервер BrowserSync, который будет синхронизирован с тестированием браузера, доступным по адресу http: // localhost: 8000, и сможет просматривать скомпилированные шаблоны по этому URL. Когда ваш сервер работает, страница обновляется автоматически, когда вы сохраняете файл, и вы можете видеть изменения, внесенные на страницу, в режиме реального времени во время работы.