Этот пакет призван для упрощенной конфигурации сборки вашего gulp проекта. Вам не нужно устанавливать каждый раз gulp и дополнительные пакеты к нему, переносить сборку из проекта в проект - достаточно воспользоваться этим пакетом, создать дополнительный файл конфигурации, если это необходимо, и запустить нужный скрипт.
Для начала, скачайте пакет командой
npm install --save-dev skraer-starter-kit
Затем добавьте скрипты в ваш package.json (чуть подробнее в этом разделе)
...
"scripts": {
"init": "skraer-starter-kit init",
"dev": "skraer-starter-kit",
"build": "skraer-starter-kit build"
},
...
Далее, запустите команду init для инициализации структуры, и можно приступать к разработке!
Для полноценной настройки вам нужно создать файл gulp.config.json в корне проекта, который сконфигурирует все задачи. По умолчанию конфигурация выглядит так:
{
"ignore_images": [],
"layout_ext": "html",
"styles_ext": "css",
"minimize": [],
"other_fonts": false,
"port": 3000
}
А это пример пользовательской настройки
{
"ignore_images": ["svg", "gif"],
"layout_ext": "pug",
"styles_ext": "stylus",
"minimize": ["js", "css"],
"other_fonts": true,
"port": 5000
}
Не обязательно указывать все поля в конфиг - достаточно тех, которые вы хотите изменить.
ignore_images
По умолчанию все картинки подвергаются сжатию и оптимизации. Вы можете указать расширения, которые будут игнорироваться оптимизаторами.
Принимает массив из расширений.
Возможны следующие значения: jpg, jpeg, png, gif, svg.
layout_ext
Расширение файлов с разметкой, по умолчанию установлен html.
При указании отличных от html значений будет включен соответствующий обработчик.
Возможные значения: html, pug.
styles_ext
Расширение файлов со стилями, по умолчанию установлен css.
При указании отличных от css значений будет включен соответствующий обработчик.
Возможные варианты: sass, scss, stylus, less, css.
minimize
Массив значений, указывает какие файлы нужно минифицировать (минификация происходит только во время задачи build).
Возможные значения: html (пока что работает только если в layout_ext включен pug), javascript или js, css.
other_fonts
Булево значение, определяющее, будут ли перенесены остальные исходные шрифты в конечную директорию.
По умолчанию с флагом false поведение следующее: если в папке src/fonts есть файлы ttf, то сборщик конвертирует их в woff и woff2 и переносит в dist/fonts. Если же woff и woff2 уже есть в исходной папке, то они просто будут перенесены.
Если установить значение true, то все остальные шрифты будут также перенесены.
port
Порт, на котором будет запущен сервер разработки.
По умолчанию 3000
Добавьте в ваш package.json в поле scripts следующие скрипты:
- skraer-starter-kit build для конечной сборки проекта в режиме production
- skraer-starter-kit init для инициализации структуры проекта и создания конфига по умолчанию
- skraer-starter-kit без одного из верхних аргументов - запускает сборку в development режиме
А также, вы можете инициировать базовые шаблоны с помощью команды skraer-starter-kit tpl, указав через двоеточие нужные файлы. Пример команды с полным перечнем доступных файлов: skraer-starter-kit tpl:html:js:css:scss
- Флаг -dg сообщает, что нужно применить babel для скриптов
- Флаг -sm включает source maps
- Флаг -debug включает переменную DEBUG
src
├───fonts
├───img
├───js
├───libs
├───other
└───styles
- в папку fonts можно добавлять шрифты с разрешением ttf - сборщик переформатирует
- в папку libs разместите библиотеки, которые вам нужны - по итогу они будут просто экспортированы
- в папке other можете держать дополнительные файлы, например, какие-то файлы для скачивания в конечном проекте
Файлы с разметкой должны располагаться в папке src на верхнем уровне.
Аналогичная структура будет создана в папке dist.
| Название пакета | Срабатывает в dev среде | Срабатывает в prod среде | Вспомогательный |
|---|---|---|---|
| gulp-autoprefixer | ✔ | ||
| gulp-babel | ✔ | ||
| gulp-clean-css | ✔ | ||
| gulp-file-include | ✔ | ✔ | |
| gulp-group-css-media-queries | ✔ | ||
| gulp-imagemin | ✔ | ✔ | |
| gulp-less | ✔ | ✔ | |
| gulp-notify | ✔ | ✔ | ✔ |
| gulp-plumber | ✔ | ✔ | ✔ |
| gulp-preprocess | ✔ | ✔ | |
| gulp-pug | ✔ | ✔ | |
| gulp-rename | ✔ | ||
| gulp-sass | ✔ | ✔ | |
| gulp-sourcemaps | ✔ | ||
| gulp-stylus | ✔ | ✔ | |
| gulp-ttf2woff | ✔ | ✔ | |
| gulp-ttf2woff2 | ✔ | ✔ | |
| gulp-uglify-es | ✔ |
gulp-file-include
Использует префикс @@. Удобно использовать вместе с разметкой для некого подобия компонентной системы.
Вы можете создать директорию (напр., src/modules) и в ней держать какие-либо компоненты, например шапку сайта.
В разметке это будет выглядеть так:
<div class="container">
@@include('./modules/header.html')
</div>
Так же вы можете подключать компоненты с определенными опциями/переменными. Подробнее смотрите в документации данного пакета.
gulp-preprocess
Определяет некоторые переменные для удобства в разметке:
- STYLE_MIN - true, если это production среда и css указан для минификации
- JS_MIN - true, если это production среда и javascript/js указан для минификации
- IS_PRODUCTION - true, если это production среда
- DEBUG - true, если указан соответствующий флаг
Это может быть очень полезно для автоматической подстановки суффикса .min для скриптов и стилей, или для вставки метрик, которые во время разработки не хотелось бы подключать.
<head>
...
<!-- @if STYLE_MIN -->
<link rel="stylesheet" href="styles/style.min.css">
<!-- @endif -->
<!-- @if !STYLE_MIN -->
<link rel="stylesheet" href="styles/style.css">
<!-- @endif -->
...
</head>
gulp-rename
Переименовывает файлы js и css, добавляя к ним суффикс .min, но только в том случае, если среда production и соответствующие расширения указаны в поле minimize.
Вы можете посмотреть на исходники задач по этим ссылкам:
clean
defaultTask
notifier
export
fontConvert
images
javascript
markdown
styles
sync
- [x] write docs
- [ ] toaster (triggers: new file in libs, new file in other, etc)
- [ ] ignore directories with prefix __