Навигация
Для создания нового проекта, необходимо выкачать .zip архив репозитория. После разархивирования запустить в терминале следующие команды:
npm install && gulp
После этого можно приступать к работе.
Проект имеет следующую структуру:
my-app/
readme.md
node_modules/
package.json
gulpfile.js
src/
index.html
template/
svgico/
svg/
style/
spriteSVG/
sprite/
preview/
libs/
js/
img/
fonts/
build/
www/
Главный index.html файл находится в папке src/. Он предназначен для включения html-темплейтов с папки template/:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/main.css" />
<title>Document title</title>
</head>
<body>
<!-- =include template/header.html -->
<!-- =include template/footer.html -->
<!-- =require img/svg/symbols.svg -->
<script src="js/main.js"></script>
</body>
</html>Главный main.sass файл находится в папке src/style/. Он предназначен для включения sass/scss/css-модулей через import
Пример:
@import "libs/_media"
@import "../libs/bootstrap-grid.css"
@import "partials/custom"Главный main.js файл находится в папке src/js/. Он предназначен для включения js-модулей через import ES6
Пример:
import objectFitImages from "object-fit-images";
import $ from "jquery";
import App from "./partials/app";Модули хранятся в папке src/js/partials. Чтобы использовать функции модуля, их нужно экспортировать. Пример:
export default function() {
console.log("App module");
}Тогда import App from "./partials/app"; в main.js позволит вызывать модуль App();
Для создания спрайта необходимо .png или .jpg картинки поместить в папку sprite после чего будет создан спрайт sprite.png
Пример использования в HTML:
<i class="sprite sprite-new"></i>Так же в sass нужно прописать:
+sprite($new)new - название картинки в папке sprite
Если нужно несколько спрайт-файлов, картинки необходимо помещать в подпапки. Например sprite/icons. После этого будет создан дополнительный спрайт icons.png. Также нужно будет подключить icons.sass в файле main.sass
@import "libs/sprite"
@import "libs/icons"Для создания иконочного шрифта SVG картинки нужно помещать в папку svgico/ после чего будет создан шрифт fico.*.
Пример использования в HTML:
<i class="fico fico-facebook"></i>SVG картинки нужно помещать в папку svg/, после чего они будут минифицированы и перемещены в build версию
Для создания svg спрайта необходимо .svg поместить в папку spriteSVG после чего preview спрайта можно найти в папке src/preview
Пример использования в HTML:
<svg class="icon store"><use xlink:href="#store"></use></svg>Development версия проекта создается в папке build/ после запуска команды gulp в терминале
Production версия проекта создается в папке www/ после запуска команды gulp deploy и содержит в себе готовую до размещения на сервере версию проекта.