Базовое окружение для разработки веб-приложения.
- Gulp 4
- Docker (Nginx, PHP, MySQL, sSMTP, Xdebug, phpMyAdmin)
- jQuery 3
- Bootstrap 4
- Font Awesome Free
- Composer
- PHPUnit
- Mocha, Chai, Sinon, Karma
- Автоперезагрузка браузера.
- Препроцессор SASS.
- Автоматическая подстановка вендорных префиксов.
- Минификация JS и CSS.
- Генератор favicons, CSS-спрайта.
- Оптимизация изображений.
- Docker для работы с back-end.
- Тестирование.
web-dev-basic/
├── dist/ # Продакшен. Команда gulp prod.
│ ├── css/
│ ├── fonts/
│ ├── images/
│ ├── js/
│ └── *.html
├── docker/ # Конфигурация контейнеров.
├── gulp/ # Скрипты для Gulp.
│ ├── paths.js # Конфиг.
│ └── tasks.js # Задачи.
├── src/ # Все ресурсы приложения.
│ ├── assets/ # Готовые HTML, CSS, JS, шрифты, картинки.
│ │ ├── css/
│ │ ├── fonts/
│ │ ├── engine/ # PHP
│ │ ├── images/
│ │ ├── js/
│ │ └── *.html
│ ├── favicons/ # Ресурсы для генерации favicons.
│ │ ├── icons/ # Иконки после генерации.
│ │ └── favicon-master.png # Донор, из которого генерятся иконки.
│ ├── html/ # HTML приложения.
│ │ ├── includes/ # Типовые блоки, которые подключаются в pages.
│ │ └── pages/ # Верстаемые страницы.
│ ├── js/ # JavaScript приложения.
│ │ ├── _main.js # Инициализация приложения.
│ │ └── *.js
│ ├── sass/ # SASS.
│ │ ├── block-one/ # Блок.
│ │ │ ├── block-one-1.sass
│ │ │ └── block-one-2.sass
│ │ ├── block-two/
│ │ ├── _base.sass # Базовые стили, которые должны быть в самом верху.
│ │ ├── _fonts.scss # Импорт шрифтов.
│ │ ├── _var.scss # Определяем переменные.
│ │ └── main.sass # Главный SASS. Импортирует в себя другие блоки.
│ ├── sass_vendor/ # SASS внешних библиотек.
│ │ ├── bootstrap/
│ │ └── fontawesome/
│ └── sprite/ # CSS-спрайт.
│ ├── icons/ # Иконки, из которых создается спрайт.
│ ├── templates/ # Шаблоны для генерации стилевых таблиц.
│ ├── sprite.png # Готовый спрайт.
│ └── sprite.sass # Готовые стили.
├── tests/ # Тесты.
│ ├── backend/
│ └── frontend/
├── composer.json
├── docker-compose.yml
├── gulpfile.js
├── karma.conf.js
├── package.json
└── phpunit.xml
-
Глобальная установка Gulp:
$ npm install --global gulp-cli
-
Установка зависимостей из файла package.json:
$ npm install
-
Установка зависимостей из файла composer.json
$ composer install
Все пути до необходимых ресурсов приложения указываются в файле /gulp/paths.js.
Что может потребоваться:
path.js.vendor
- подключить дополнительные вендорные скрипты.
Задачи пишутся в файле /gulp/tasks.js, после подключаются в файле /gulpfile.js:
Вводим команду:
$ gulp build
- Поднимется browser-sync.
- Будут отслеживаться изменения в HTML, SASS и JS.
- У CSS и JS будет строиться sourcemap.
- CSS и JS создаются в минифицированном и несжатом виде.
-
Верстаемые страницы создаются в папке /src/html/pages.
-
Повторяемые блоки можно перенести в /src/html/includes и подключать при необходимости конструкцией:
@@include( '../includes/footer.html' )
Возможны более сложные конструкции, подробнее https://github.com/coderhaoxin/gulp-file-include.
-
После сборки готовый HTML кладется в корень папки /src/assets.
-
CSS пишется на SASS в папке /src/sass.
-
Вендорный SASS хранится в папке /src/sass_vendor.
- После обработки SASS готовый CSS кладется в папку /src/assets/css.
- После обработки JS готовые скрипты кладутся в папку /src/assets/js.
- Используемые изображения размещать в папке /src/assets/images.
- Используемые шрифты размещать в папке /src/assets/fonts.
- CSS и JS создаются в минифицированном и несжатом виде.
- Файлы main.css и main.min.css содержат основные стили.
- Файлы vendor.css и vendor.min.css содержат вендорные стили.
- Файлы main.js и main.min.js содержат основные скрипты.
- Файлы vendor.js и vendor.min.js содержат вендорные скрипты.
- В HTML, по умолчанию, подключаются минифицированные версии CSS и JS.
- У минифицированных версий CSS и JS создаются sourcemap.
Вводим команду:
$ gulp prod
- Готовый HTML скопируется в корень папки /dist.
- У сгенерированного CSS и JS не строятся sourcemap.
- Все изображения из папки /src/assets/images оптимизируются и переносятся в /dist/images. Исходные файлы в /src/assets/images не меняются.
- Все шрифты, JS, CSS генерятся в папку /dist.
- CSS и JS создаются в минифицированном и несжатом виде.
Для ускорения повторной оптимизации изображений, результат предыдущей оптимизации кешируется. Чтобы очистить кеш, выполните команду:
$ gulp clean:cache
- Подготовьте донора (мастер изображение), из которого будут создаваться иконки, и положите донора в папку /src/favicons с именем favicon-master.png.
- В задаче
favicons
укажите необходимые настройки, например, какие иконки надо создать (ключ icons
). - Выполните команду:
$ gulp favicons
В результате:
- Создадутся иконки, которые будут скопированны в папку /src/assets/images/favicons.
- В папке /src/html/includes создастся файл favicons.html, который подключается в /src/html/includes/head.html. Данный файл будет содержать HTML код примерно такого вида:
<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png"> <link rel="shortcut icon" href="images/favicons/favicon.ico">
Для удаления иконок выполните команду:
$ gulp clean:favicons
Задача clean:favicons
всегда выполняется перед задачей favicons
.
- Положить иконки, для которых надо сгенерировать спрайт, в папку /src/sprite/icons.
- Запустить задачу
sprite
. - В корне папки /src/sprite появятся два файла:
- sprite.png - иконки
- sprite.sass - переменные и миксины для генерации иконок
- В файле _/src/sass/sp.sass подключен миксин для генерации стилей.
Задача sprite:copy
копирует sprite.png в /src/assets/images.
Задача clean:sprite
удаляет все файлы, которые находятся только в корне /src/sprite. Вложенные папки не затрагиваются.
Имя файла иконки подставляется в название класса.
alarm.png -> sp--alarm
В результате получится один базовый класс:
.sp {
display: inline-block;
background-image: url(../images/sprite.png);
}
И классы отдельных иконок:
.sp--alarm {
background-position: -225px -106px;
width: 60px;
height: 60px;
}
Использование:
<div class="sp sp--alarm"></div>
Для тестирвоания используется фреймворк PHPUnit. Тесты пишутся в папке /tests/backend. Конфигурация phpunit.xml. Bootstrap /vendor/autoload.php.
Для тестирвоания используется фреймворк Mocha. Тесты пишутся в папке /tests/frontend. Настройка окружения тестирования в karma.conf.js.
$ gulp build # Разработка приложения
$ gulp prod # Продакшен приложения
$ gulp clean:dist # Удаление папки dist
$ gulp clean:cache # Очистка кеша
$ gulp clean:favicons # Удаление сгенерированных favicons
$ gulp clean:sprite # Удаление сгенерированного спрайта
$ gulp images # Оптимизация изображений
$ gulp html # Соборка HTML
$ gulp css:main # Собрка сновных стилей
$ gulp css:vendor # Сборка вендорных стилей
$ gulp js:main # Сборка основных скриптов
$ gulp js:vendor # Сборка вендорных скриптов
$ gulp fonts # Копирование вендорных шрифтов
$ gulp favicons # Генерация favicons
$ gulp sprite # Генерация спрайта
$ gulp sprite:copy # Копирование спрайта в assets/images
Gulp
https://github.com/gulpjs/gulp
$ npm i --save-dev gulp
В случае ошибки работа Gulp не прирывается. Выводится информация об ошибке.
https://github.com/floatdrop/gulp-plumber
$ npm i --save-dev gulp-plumber
Удаление файлов
https://github.com/sindresorhus/del
$ npm i --save-dev del
Переименовывание файлов
https://github.com/hparra/gulp-rename
$ npm i --save-dev gulp-rename
Препроцессор SASS
https://github.com/dlmanning/gulp-sass
$ npm i --save-dev gulp-sass
Нужен для корректной обработки @import вида './**/*'
https://github.com/mikevercoelen/gulp-sass-glob
$ npm i --save-dev gulp-sass-glob
Объединение файлов
https://github.com/gulp-community/gulp-concat
$ npm i --save-dev gulp-concat
Добавление вендорных префиксов в CSS
https://github.com/sindresorhus/gulp-autoprefixer
$ npm i --save-dev gulp-autoprefixer
Постороение Sourcemaps
https://github.com/gulp-sourcemaps/gulp-sourcemaps
$ npm i --save-dev gulp-sourcemaps
Подключение файлов
https://github.com/coderhaoxin/gulp-file-include
$ npm i --save-dev gulp-file-include
Генерация Favicons
https://github.com/itgalaxy/favicons
$ npm i --save-dev gulp-favicons
Группировка медиа запросов CSS
https://github.com/avaly/gulp-group-css-media-queries
$ npm i --save-dev gulp-group-css-media-queries
Автоперезагрузка страницы в браузере при изменениях отслеживаемых файлов
https://browsersync.io/
$ npm i --save-dev browser-sync
Для запуска плагинов при определенных условиях приямо в потоке
https://github.com/robrich/gulp-if
$ npm i --save-dev gulp-if
Форматирование HTML файлов
https://github.com/arsen/gulp-html-beautify
$ npm i --save-dev gulp-html-beautify
Оптимизация CSS
https://github.com/scniro/gulp-clean-css
$ npm i --save-dev gulp-clean-css
Оптимизация JS
https://github.com/terinjokes/gulp-uglify
$ npm i --save-dev gulp-uglify
Оптимизация изображений
https://github.com/sindresorhus/gulp-imagemin
$ npm i --save-dev gulp-imagemin
Плагин для gulp-imagemin
https://github.com/imagemin/imagemin-jpeg-recompress
$ npm i --save-dev imagemin-jpeg-recompress
Оптимизация изображений
https://github.com/imagemin/imagemin-pngquant
$ npm i --save-dev imagemin-pngquant
Генератор CSS-спрайта https://github.com/twolfson/gulp.spritesmith
$ npm i --save-dev gulp.spritesmith