├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .gitignore ├── .pug-lint.json ├── .stylelintrc.json ├── LICENSE ├── README.md ├── build ├── about.html ├── css │ └── style.min.css ├── img │ └── forest.jpg ├── index.html └── js │ └── main.min.js ├── gulp ├── config.js └── tasks │ ├── clean.js │ ├── copyDependencies.js │ ├── fonts.js │ ├── imageMinify.js │ ├── lighthouse.js │ ├── pug2html.js │ ├── script.js │ ├── serve.js │ ├── styles.js │ └── svgSprite.js ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── img └── forest.jpg ├── js └── main.js ├── local_modules ├── jquery │ └── dist │ │ ├── jquery.min.js │ │ └── jquery.slim.min.js └── normalize.css │ └── normalize.css ├── pages ├── about.pug ├── common │ ├── footer.pug │ ├── header.pug │ └── layout.pug ├── includes │ ├── about │ │ └── company-info.pug │ └── index │ │ └── banner.pug └── index.pug └── styles ├── common ├── footer.scss ├── global.scss └── header.scss ├── mixins └── media.scss ├── style.scss └── utils ├── fonts.scss └── variables.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # Файл с настройками для редактора. 2 | # 3 | # Если вы разрабатываете в редакторе WebStorm, BBEdit, Coda или SourceLair 4 | # этот файл уже поддерживается и не нужно производить никаких дополнительных 5 | # действий. 6 | # 7 | # Если вы ведёте разработку в другом редакторе, зайдите 8 | # на https://editorconfig.org и в разделе «Download a Plugin» 9 | # скачайте дополнение для вашего редактора. 10 | 11 | root = true 12 | 13 | [*] 14 | charset = utf-8 15 | end_of_line = lf 16 | indent_size = 2 17 | indent_style = space 18 | insert_final_newline = true 19 | trim_trailing_whitespace = true 20 | 21 | [*.md] 22 | trim_trailing_whitespace = false 23 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build 2 | gulpfiles.js 3 | 4 | /gulp 5 | /src/local_modules 6 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jquery": true 4 | }, 5 | "overrides": [ 6 | { 7 | "files": [ "src/**/*.js" ], 8 | "extends": [ 9 | "standard", 10 | "htmlacademy/es6" 11 | ], 12 | "rules": { 13 | "indent": [ 14 | "error", 15 | 4 16 | ], 17 | "semi": [ 18 | "error", 19 | "never" 20 | ], 21 | "quotes": [ 22 | "error", 23 | "backtick" 24 | ] 25 | } 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text eol=lf 2 | 3 | *.png binary 4 | *.jpg binary 5 | *.jpeg binary 6 | *.webp binary 7 | *.woff binary 8 | *.woff2 binary 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Файлы и папки операционной системы 2 | .DS_Store 3 | Thumbs.db 4 | 5 | # Файлы редактора 6 | .idea 7 | *.sublime* 8 | .vscode 9 | 10 | # Вспомогательные файлы 11 | *.log* 12 | node_modules/ 13 | reports/ 14 | 15 | # Папка с собранными файлами проекта 16 | # build/ 17 | -------------------------------------------------------------------------------- /.pug-lint.json: -------------------------------------------------------------------------------- 1 | { 2 | "disallowClassAttributeWithStaticValue": true, 3 | "disallowClassLiteralsBeforeIdLiterals": true, 4 | "disallowDuplicateAttributes": true, 5 | "disallowHtmlText": true, 6 | "disallowIdAttributeWithStaticValue": true, 7 | "disallowLegacyMixinCall": true, 8 | "disallowMultipleLineBreaks": true, 9 | "disallowSpaceAfterCodeOperator": true, 10 | "disallowSpacesInsideAttributeBrackets": true, 11 | "disallowStringConcatenation": true, 12 | "requireClassLiteralsBeforeAttributes": true, 13 | "requireLowerCaseAttributes": true, 14 | "requireLowerCaseTags": true, 15 | "requireStrictEqualityOperators": true, 16 | "validateAttributeQuoteMarks": "\"", 17 | "validateDivTags":true, 18 | "validateLineBreaks":"LF" 19 | } 20 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-scss" 4 | ], 5 | "extends": [ 6 | "stylelint-config-standard", 7 | "stylelint-config-standard-scss", 8 | "stylelint-config-htmlacademy" 9 | ], 10 | "rules": { 11 | "indentation": 4, 12 | "at-rule-no-vendor-prefix": true, 13 | "at-rule-empty-line-before": "always", 14 | "scss/selector-no-redundant-nesting-selector": true, 15 | "scss/at-import-partial-extension": "never", 16 | "block-closing-brace-newline-before": "always", 17 | "block-closing-brace-newline-after": "always", 18 | "at-rule-name-case": "lower", 19 | "at-rule-name-space-after": "always", 20 | "at-rule-semicolon-newline-after": "always", 21 | "at-rule-semicolon-space-before": "never", 22 | "selector-max-class": 2, 23 | "unit-whitelist": [ 24 | "em", 25 | "rem", 26 | "%", 27 | "px", 28 | "vh", 29 | "vm", 30 | "vmax", 31 | "vmin" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2020 Denys Vykhrystiuk 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 4 | 5 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Начало 2 | Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года (скопировал я ее с сайта в 2017), я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать. 3 | 4 | Не только древность моей сборки мотивировала на эту статью, но и еще одна причина: мне больно смотреть, когда заходят на онлайн-сервисы для конвертации `scss`, минификации `javascript` и других рутинных задач. Самое забавное - когда сделали мелкую правку, снова нужно проходить все круги ~~ада~~ копипаста. 5 | 6 | Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить. 7 | 8 | 9 | # Поехали! 10 | ## Gulp 11 | Начнем с главного в нашей сборке. 12 | 13 | Gulp - это наш фундамент, потому что он будет управлять всеми нашими задачами, другими словами, `taskmanager`. Концепция задач очень проста. Название асинхронной javascript функции равно названию задачи, и работает она по принципу: берет данные, трансформирует их и записывает результат. 14 | 15 | ![](https://habrastorage.org/webt/lj/g3/hv/ljg3hvoy9axohgzzd19rde6ziwo.png) 16 | 17 | 18 | Как видим, все просто: называем нашу задачу `css`, вызываем функцию `src`, которая берет данные по определенному шаблону и передает данные по трубе (функция `pipe()`). Внутри `pipe` вызываем функцию плагина, которая трансформирует наши данные и результат передает функцию `dest`. `dest` - записывает результат по указанному пути. 19 | 20 | С `pipe` можно выстраивать любые цепочки. 21 | 22 | ![](https://habrastorage.org/webt/ia/ar/oj/iaarojs2o_yxufltm0wtwuglmvc.png) 23 | 24 | 25 | В четвертой версии много чего изменилось, но на что нужно точно обратить внимание - это на `gulp.series()` и `gulp.parallel()`. Позже мы разберем параллельное выполнение задач. 26 | 27 | Как вы заметили, в примерах я экспортировал функции, в старом API использовали `gulp.task()`: 28 | ```javascript 29 | gulp.task('taskName',function() { 30 | //do somethings 31 | }) 32 | ``` 33 | Больше не рекомендуется использовать `gulp.task()`. 34 | 35 | Экспортирование функций позволяет разделять на публичные и приватные задачи. 36 | - `публичные задачи` - экспортируются из вашего gulpfile, что позволяет запускать их командой gulp. 37 | - `приватные задачи` - создаются для внутреннего использования, как правило, в составе `series()` или `parallel()` 38 | 39 | Пару слов о шаблонах поиска файлов в функции `src`. 40 | - `templates/*.html` - ищет файлы с расширением `html` в папке `templates` 41 | - `templates/**/*.html` - ищет файлы с расширением `html` во всех папках, которые в `templates` 42 | 43 | Более подробная информация [здесь](https://gulpjs.com/docs/en/getting-started/explaining-globs), [здесь](https://gulpjs.com/docs/en/api/concepts#globs) и [здесь](https://github.com/gulpjs/glob-parent). 44 | 45 | # Структура проекта 46 | После того, как мы разобрались с фундаментом нашего проекта, начнем делать первые шаги. Проверяем, установлены ли `node.js` и `npm`. 47 | 48 | ![](https://habrastorage.org/webt/gr/vw/jq/grvwjqqbyh2ntjayjcmo33p4uvm.png) 49 | 50 | Если они не установлены, следуйте инструкциям [здесь](https://nodejs.org/en/). 51 | 52 | Создаем папку для нашего проекта. Внутри инициализируем npm `npm init --yes` 53 | Ключ `--yes` означает автоматические ответы вопрос по проекту. 54 | 55 | Создадим три папки: 56 | - `build` - оптимизированные файлы для использования на сервере 57 | - `src` - рабочая папка, где будут храниться все наши исходники 58 | - `gulp` - здесь будут храниться наши tasks 59 | 60 | Еще добавим файл `.gitignore`, чтобы системные файлы не попадали в репозиторий. 61 | Папка `/build` задокументирована, потому что часто использую `GitHub Pages` для демонстрации работы. 62 | 63 | Не забудьте установить gulp: npm install --save-dev gulp 64 | 65 | 66 | 67 | ```gitignore 68 | # Файлы и папки операционной системы 69 | .DS_Store 70 | Thumbs.db 71 | 72 | # Файлы редактора 73 | .idea 74 | *.sublime* 75 | .vscode 76 | 77 | # Вспомогательные файлы 78 | *.log* 79 | node_modules/ 80 | 81 | # Папка с собранными файлами проекта 82 | # build/ 83 | ``` 84 | 85 | 86 | # Первые шаги 87 | 88 | ## HTML 89 | У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода. 90 | 91 | ![bad format html](https://hsto.org/files/646/cbc/f0a/646cbcf0a5374071b8396372602f3693.png) 92 | 93 | 94 | Все наши проблемы решает [Pug](https://pugjs.org/language/doctype.html). Одного примера будет достаточно, чтобы понять, как его использовать. Не понимаю, почему этот плагин еще повсюду не используют. 95 | 96 | ![](https://habrastorage.org/webt/pa/_j/g7/pa_jg7rtrtanxwpv8tvd0s2ftma.jpeg) 97 | 98 | 99 | Новичкам советую обратить внимание еще на несколько возможностей: 100 | - `Разделение на модули` - удобно, когда используешь БЭМ: один блок - один файл. [Подробнее.](https://pugjs.org/language/includes.html) 101 | 102 | 103 | ![](https://habrastorage.org/webt/sx/pp/lz/sxpplzqdystfm-q9skym2nvr860.jpeg) 104 | 105 | 106 | - `Миксины` - удобно использовать для однотипных блоков. Например, карточки товаров или комментариев. [Подробнее.](https://pugjs.org/language/mixins.html) 107 | 108 | 109 | ![](https://habrastorage.org/webt/jz/hr/fh/jzhrfhh8czcyhetry6o2l9zmale.jpeg) 110 | 111 | 112 | - `Циклы` для генерации однотипных блоков. [Подробнее.](https://pugjs.org/language/iteration.html) 113 | 114 | 115 | ![](https://habrastorage.org/webt/bu/uj/bn/buujbnhfu4atbiffqueuhj6dfw8.jpeg) 116 | 117 | 118 | За последнее время сильно ничего не изменилось, только название с `Jade` на `Pug`. [Подробнее.](https://github.com/pugjs/pug#rename-from-jade) 119 | 120 | ## Разделяем HTML 121 | На нашем сайте будут две тестовые страницы `about` и `index`. Структура на страницах повторяется: есть блоки `