Skip to content

Instantly share code, notes, and snippets.

@nikolai-shabalin
Last active May 14, 2020 12:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nikolai-shabalin/5f7524c8b33b2f933d0a4f12340bd540 to your computer and use it in GitHub Desktop.
Save nikolai-shabalin/5f7524c8b33b2f933d0a4f12340bd540 to your computer and use it in GitHub Desktop.
Вопросы к разделу «Погружение в автоматизацию» на 19 потоке

Вопросы к разделу «Погружение в автоматизацию»

Зачем нужна сборка

  1. Что такое галп и как с ним работать
  2. Всегда ли работают с готовой сборкой?
  3. Как настраивать свою, что требуется или обычно уже есть сборка
  4. Можно ли обходиться в работе без галпа?

Gulp — это система запуска задач для кода, которая используется для сборки, проверки и разработки кода. Это не единственная система сборки, есть Webpack, Parcel и другие, но для вёрстки часто используется именно Gulp.

Сборка или окружение для разработки обычно есть во всех существующих проектах. Для новых проектов разработку часто начинают именно с создания такой сборки и установки окружения. У многих разработчикв есть собственные шаблоны, которые они копируют в новые проекты и дальше уже настраивают или расширяют их для конкретных задач.

Вы можете взять сборку с этого курса и использовать в вашей работе, но чтобы изменять и настраивать её под другие проекты, нужно в ней хорошо разобраться: понять откуда берутся файлы, какими плагинами обрабатываются и куда записывается результат.

Обходится в простой работе без сборщиков можно, но как только вы попробуете их, то уже не сможете отказаться от удобства локального сервера, автоматического обновления. Также собранный код даёт преимущества для скорости загрузки — об этом мы поговорим в следующем разделе.

Как заполнять gulpfile.js?

Файл package.json мы заполняем сами перед началом проекта? Какие еще файлы из нашего проекта, связанные с работой gulp и node.js мы должны создавать и заполнять сами, а какие файлы создаются автоматически?

Точно также как мы это делали на лекции. В реальной жизни вам приходит сборка и вы ей пользуетесь. Как только вы понимаете, что какой-то функциональности не хватает, например вам нужны webp-картинки, вы добавляете такую функциональность. Ответить на вопрос "какие нужно, а какие нет" не получится. Вся функциональность добавляется по потребностям разработчика.

Куда устанавливается пакет?

npm install package — позволяет установить любой пакет по его имени. Если при этом к команде добавить префикс -g пакет будет установлен глобально на весь компьютер. А если без -g написать, то куда будет установлен пакет? только в конкретный проект?

Если установить пакет без флага -g, например, npm i node-sass, то такой пакет установится в папку node_modules проекта - projects/pognali/node_modules/node-sass/

@dmitmokrov
Copy link

Насколько критично использовать "старый" синтаксис gulp, которым пользуемся мы (gulp.task(...))? Как я понял, это считается не лучшей практикой. Из документации:
In the past, task() was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won't work.
(В прошлом task () использовался для регистрации ваших функций в качестве задач. Хотя этот API все еще доступен, экспорт должен быть основным механизмом регистрации, за исключением крайних случаев, когда экспорт не будет работать.)

@nikolai-shabalin
Copy link
Author

@dmitmokrov

Сейчас никакой критичности в переписывание gulpfile.js нет, но если вам нечем будет заняться, то вы можете переписать создание задач в функциональном стиле, как этого требует gulp 4.

Только если начнёте переписывать знайте, что придётся переписать весь файл, а не только какие-то его части.

Copy link

ghost commented May 2, 2020

Николай, делала сборку для своего проекта и столкнулась с тем, что у пакета gulp-imagemin (который обрабатывает картинки) немного поменялся состав компонентов. Сейчас компонент для оптимизации jpeg называется imagemin.mozjpeg. Поэтому, если написать задачу по обработке картинок так, как написано в презентации к лекции - консоль будет выдавать ошибку. Поэтому строку про optipng в задаче нужно заменить (как указано в текущей версии документации к пакету - https://www.npmjs.com/package/gulp-imagemin), например на такую - imagemin.mozjpeg({quality: 75, progressive: true}), Решила здесь написать, вдруг кому-то из студентов пригодится.

@Nismoracer
Copy link

Добрый день, на лекции про автоматизацию Николай рассказывал про метод подключения svg спрайта из файла непосредственно на страницу при помощи posthtml-include. Для защиты проекта можно ли использовать вариант с внешним svg спрайтом, без вставки его в html? И какой из вариантов предпочтительнее, исходя из скорости загрузки, или, может быть, других преимуществ? Заранее спасибо!

@nikolai-shabalin
Copy link
Author

nikolai-shabalin commented May 14, 2020

@Nismoracer, вариант с внешним файлом не заработает в IE11.
Но есть вариант добавить полифил svg4everybody.

Какой вариант предпочтительнее трудно сказать. Выбирайте любой, который считаете удобным.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment