Gulp git: gulpjs/gulp: A toolkit to automate & enhance your workflow

Простой лендинг, Gulp + Sass + Git + js (jQuery) • фриланс-работа для специалиста • категория Javascript ≡ Заказчик Андрей Ц.

Это лендинг.

3 разрешения.

Ссылка на макеты — https://fex.net/261824612618

На работу есть 4 рабочих дня. Крайний срок, 20.07 до 15.00, потом я улетаю из Украины на 2 недели и выключаю все устройства. Учтите тайминг, что бы в случае чего не обижаться и не писать гневных отзывов.

Обязательно создать репозиторий для контроля работы. Проверка работы, раз в день. 

По желанию можете вылить у себя на хостинге. Я всё равно буду тестить на локальной машине.

От вас реальные сроки и оценка за работу.

Кандидата выберу в 15.00 16.07

---

0. Базовые требования.

0.1. Сборщик проекта — gulp

0.2. css компилятор — sass, не путать с scss (да, это принципиально)

0.3. все файлы должны быть сминифицированы, картинки сжаты и оптимизированы

0.4. загрузка css посредством js, для максимального приблежения к показателям google page speed. Стараемся добраться до 90 из 100

0.5. можно использовать jQuery, будет большим плюсом написанный код на ES6, с использованием нового синтаксиса и оборачиванием так нам привычного jQuer-ёвского костыльного кода, в классы с красивыми методами.

0.6 паралельно с использованием медиазапросов, так же добавьте проверку js на useragent для определения типа устройства. Должно быть три типа desctop, tablet, mobile. Соответственно адаптивная вёрстка должна быть сделана исходя не только ширины экрана, а так же и типа устройства.

0.7. Обязательно создать git репозиторий и ежедневно делать коммиты. Без этого пункта, можете даже не оставлять заявки. Не теряйте ни своё, ни моё время.

---

1. Шапка фиксируется при прокрутке

2. Плавная прокрутка при клике в меню, на элемент с якорем.

3. Используем библиатеку animate.css.

3.1 Всем картинкам выставить fadeIn

3.2 Всем Заголовкам выставить  fadeInDown

4. Блок с кружочками.

4. 1 Сначала появляется сам кружок fadeIn, потом картинка в кружочке fadeIn, потом появляется текст fadeInDown

5. Все popup элементы повяляются с fadeIn, пропадают с fadeOut

6. Карта при скроллинге не должна приближать

7. Когда появляется бургер меню.

7.1 Анимация меню при нажатии как на https://codepen.io/designcouch/pen/Atyop 2 вариант сверху

7.2 Структура мобильного меню должна быть как на https://farmasi.in.ua/ , то есть, на весь экран с плавной анимацией появление. 

7.3 Когда в мобильном меню нажимается какой-то пункт, происходит плавный скролл к эллементу и меню должно свернуться.

8. Кнопки.

8.1. везде по сайту должно стоять transition 0.3 easy-in-out

8.2 при наведении на кнопку, color плавно меняется цветом с background кнопки

9. Формы.

9.1 формы должны быть разработаны исходя html разметки формы, которая создается плагинов Contact Form 7. Так как сайт будет садиться на WP. Пример html разметки формы можно посмотреть на https://farmasi. in.ua/ . Просто делайте копипаст формы, как на примере и стилизируйте.

Что нужно уметь верстальщику — Блог HTML Academy

В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

И чем ближе был 2020, тем больше грань размывалась — и теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.

В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флоатов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.

С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2020 году требуют от верстальщика работодатели.

Мы в HTML Academy работаем над тем, что верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.

Идеальная вакансия

Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

Требуется верстальщик, который:

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и Wordpress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
• Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
• Имеет своё портфолио, инициативный, готов пройти испытательный срок

Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

Верстальщический вундерлист

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

Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).

• SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
• Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
• БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
• Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
• PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
• Git — система контроля версий, чтобы не делать Макет_2_Финальный_СПравками_final_наревью.html. Мы в Академии любим Git и написали про него много статей.
• Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
• Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
• jQuery — популярное нечто решение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко.
• Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

Что там с Фотошопом и Иллюстратором

Некоторые ребята говорят, что их всерьёз кто-то использует.

Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode. Ну то есть Фотошоп и Иллюстратор, конечно, ещё много где, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.

Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.

А портфолио откуда брать?

• Найти бесплатных макетов и наверстать.
• Придумать самому, если есть Дизайнерская Жилка.
• Пройти полноценную подготовку к работе и получить пару проектов в портфолио.

Что об этом всём думают в индустрии?

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

По опыту: нужно точно, быстро и адаптивно.

Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.

Чтобы собрать своё добро, нужно знать, где скачать Node. js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.

В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер.

Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.

Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.

Катя Иванова, перевела бабушку на React

Что ещё?

Все работодатели хотят, чтобы к ним пришёл опытный верстальщик — для этого берите и верстайте. Можно смотреть на популярные сайты, верстать по бесплатным макетам или хорошим курсам. Как определить, хорошие ли перед вами курсы, я рассказывал в статье «Как получать 100 тысяч за код». Там есть полный список вещей, которые хорошо бы знать веб-разработчику, чтобы повысить шансы на высокую зарплату.

выпусков · gulpjs/gulp · GitHub

Новый выпуск

Есть вопрос по этому проекту? Зарегистрируйте бесплатную учетную запись GitHub, чтобы открыть задачу и связаться с ее сопровождающими и сообществом.

Зарегистрируйтесь на GitHub

Нажимая «Зарегистрироваться на GitHub», вы соглашаетесь с нашими условиями обслуживания и Заявление о конфиденциальности. Время от времени мы будем отправлять вам электронные письма, связанные с учетной записью.

Уже на GitHub? Войти на ваш счет

Добавить примечание об узле >14 в документацию gulp.watch документация

#2654 открыт 29 нояб. 2021 г. автором nicolashenry

Добавить поддержку gulpfile.cjs

#2653 открыт 27 нояб. 2021 г. автором david-bojnansky

Поддержка именованного экспорта в файлы mjs улучшение

#2634 открыт 25 сент. 2021 г. автором perrin4869

Неожиданные результаты, если проект узла расположен по пути, содержащему квадратные скобки [] ошибка требуется дальнейшее расследование

#2492 открыт 25 сент. 2020 г. автором rimelynx

Gulp квадратные скобки [] совпадают на разных ОС ошибка требуется дальнейшее расследование требуется помощь

#2436 открыт 28 апр. 2020 г. автором iliyahanev

Опция отключения загрузки существующих исходных карт для источника улучшение требуется дальнейшее расследование

#2409 открыт 16 янв. 2020 г. автором стоф

gulp.dest() не закрывает файлы при использовании из watch() требуется дальнейшее расследование требуется помощь

#2403 открыт 19 декабря 2019 г. автором petr-buchin

gulp обрабатывает флаги после — как имена задач требуется дальнейшее расследование требуется помощь

#2383 открыт 1 октября 2019 г. автором dawidgarus

write-a-plugin «Вызывать функцию обратного вызова только тогда, когда текущий файл (поток/буфер) полностью израсходован»

#2380 открыт 28 сентября 2019 г. автором craigphicks

gulp.watch сообщает о проигнорированных файлах требуется дальнейшее расследование требуется помощь

#2362 открыт 8 августа 2019 г. автором bjg2

gulp.src не работает с путем unc сервера

#2294 открыт 27 фев. 2019 автором ray007

Продолжительность скрыта в Powershell в Windows со стандартным цветом фона улучшение требуется помощь

#2271 открыт 16 декабря 2018 г. автором No0Vad

[Документация] Принципы API документация

#2257 открыт 25 октября 2018 г. автором janiceilene

[Документы] Расширенный раздел документация

#2256 открыт

25 октября 2018 г.

автором джанисейлин

1 из 7 задач

Исключить путь из src не работает (‘!.

./folder’)? требуется дальнейшее расследование

#2211 открыт 22 августа 2018 г. автором sabsaxo

[Документы] Рецепты документация требуется помощь вопрос

#2164 открыт

25 апреля 2018 г.

автором джанисейлин

глоток 4 документации

gulp.watch не работает, если просматриваемый глобус содержит имя папки с японскими символами ошибка вверх по течению

Проблемы, которые необходимо исправить в восходящем направлении

#2153 открыт 13 апреля 2018 г. автором aruku7230

[Документация] Опишите, что такое рецепт, в файле readme рецептов. документация

#2130 открыт 19 февраля 2018 г. автором phated

инструменты для зеркалирования документов требуется помощь

#1446 открыт 22 декабря 2015 г. автором yocontra

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

#1269 открыт

21 сентября 2015 г.

пользователем калумакра

глоток 4 документации

[Документы] Руководство по миграции документация глоток4 требуется помощь

#861 открыт 11 января 2015 г. автором johnpapa

[Документация] Начало работы — управление ошибками документация

#359 открыт 20 марта 2014 г. автором Йоконтра

16

Внедрить новую систему песочницы fs документация вероятно пользовательская земля

#357 открыт

20 марта 2014 г.

автором Йоконтра

3 задания

глоток 4.1

Порядок файлов не сохраняется в буферном режиме документация требуется помощь

#300 открыт 22 февраля 2014 г. автором nfroidure

Совет! Добавление no:label покажет все без метки.

Git против глотка | Каковы различия?

Home

DevOps

Build, Test, Deploy

Version Control System

Git170K Stacks

gulp11.5K Stacks

Git

---

Stacks170K

Followers144.8K

+ 1

Votes6.6K

gulp

---

Stacks11,5K

Подписчики8,4K

+ 1

Голосов1,7K

Добавить инструмент

В чем отличия Git от gulp?

Что такое Git? Быстрая, масштабируемая, распределенная система контроля версий . Git — это бесплатная распределенная система управления версиями с открытым исходным кодом, предназначенная для быстрой и эффективной обработки любых проектов, от небольших до очень крупных.

Что такое глоток? Система потоковой сборки . Сборка системы автоматизации задач: минификация и копирование всех файлов JavaScript, статических изображений. Больше возможностей для просмотра файлов для автоматического повторного запуска задачи при изменении файла.

Git и gulp в первую очередь классифицируются как «Система управления версиями» и

«Инструменты сборки JS / JS Task Runners» инструментов соответственно.

«Распределенная система контроля версий» , «Эффективное ветвление и слияние» и «Быстрый» — ключевые факторы, по которым разработчики выбирают Git; тогда как «Скорость сборки» , «Чтение» и «Переконфигурация кода» являются основными причинами, по которым предпочтение отдается gulp.

Git и gulp являются инструментами с открытым исходным кодом. Gulp с 31,3K звездами GitHub и 4,41K форков на GitHub кажется более популярным, чем Git с 28,2K звёзд GitHub и 16,3K форков GitHub.

Согласно сообществу StackShare, Git имеет более широкое одобрение и упоминается в 3933 стеки компании и 4785 стеки разработчиков; по сравнению с gulp, который указан в стеках 1163 компаний и 706 стеков разработчиков.

Получите консультацию от разработчиков вашей компании, используя StackShare Enterprise. Зарегистрируйтесь в StackShare Enterprise.

Подробнее

Плюсы Git

Плюсы gulp

• Распределенная система контроля версий

• Эффективное ветвление и слияние

• Open source

• Better than svn

• Great command-line application

• Simple

• Easy to use

• Does not require server

• Distributed

• Маленький и быстрый

• Рабочий процесс на основе функций

• Промежуточная область

• Самый распространенный VSC

• Role-based codelines

• Disposable Experimentation

• Frictionless Context Switching

• Data Assurance

• Efficient

• Just awesome

• Github integration

• Easy branching and слияние

• Совместимость

• Гибкость

• Возможна потеря истории и фиксации

• Rebase поддерживается изначально; рефлог; Доступ к сантехнике

• Командная интеграция

• Быстрая, масштабируемая, распределенная система управления ревизией

• Гибкий, легкий и быстрый

• .

• Это то, что вы делаете

Минусы Git

Минусы gulp

Будьте первым, кто оставит минус

Что такое Git?

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

Что такое глоток?

Автоматизация задач системы сборки: минификация и копирование всех файлов JavaScript, статических изображений. Больше возможностей для просмотра файлов для автоматического повторного запуска задачи при изменении файла.

Вакансии, в которых Git и gulp упоминаются как желаемый набор навыков

Старший инженер-программист — платформа PowerApps

CBRE

Соединенные Штаты Америки Нью -Йорк Нью -Йорк

Просмотр информации о работе

Инженер базы данных SR — II

CBRE

Индия Telangana Hyderabad

Информация о работе

Старший программный инженер — AZURE

CBRE

. CBRE

CBRE

. CBRE

CBRE

.

Соединенные Штаты Америки Техас Ричардсон

Посмотреть сведения о вакансии

Full Stack Sr Инженер-программист

CBRE

Соединенные Штаты Америки Техас Ричардсон

Посмотреть сведения о вакансии

Инженер-программист, трафик

Pinterest

Сан-Франциско, Калифорния, США;

Посмотреть сведения о вакансии

Старший разработчик Salesforce (контракт)

Pinterest

Сан-Франциско, Калифорния, США;

Просмотреть сведения о вакансии

Инженер данных (с полным стеком)

CBRE

Испания Мадрид, Комунидад-де-Мадрид

Просмотреть сведения о вакансии

Старший инженер-программист — I

CBRE

Индия Телангана Хайдарабад

Посмотреть сведения о вакансии

Посмотреть вакансии для Git

Посмотреть вакансии для gulp

Какие компании используют Git?

Какие компании используют gulp?

• Shopify
• Netflix
• Udemy
• Robinhood
• reddit
• Delivery Hero SE
• CRED
• Atolye15
• Via Varejo
• doubleSlash Net-Business GmbH
• FLYERALARM GmbH
• Trendyol Group
• Myntra
• Brilliant

Узнайте, какие команды внутри вашей компании используют Git или gulp.

Зарегистрируйтесь в StackShare EnterpriseПодробнее

Какие инструменты интегрируются с Git?

Какие инструменты интегрируются с gulp?

• Bitbucket
• SourceTree
• Datadog
• Azure DevOps
• Swagger UI
• Plesk
• GitKraken
• Babel
• TSLint
• Buddy
• Bitrise
• Web Starter Kit
• KeyCDN
• BrowserSync

Blog Posts

Pinterest Flink Deployment Framework

Mar 24 2021 at 12:57PM

Pinterest

How We Designed Our Continuous Интеграционная система станет еще более…

3 марта 2021 г., 17:37

Pinterest

Как изменение одной строки сократило количество клонов на 99%

28 октября 2020 г., 16:30

Pinterest

GIT Отключенная головка: что это значит и как восстановить

августа 19 2020 в 18:16

Cloudbees

+

2

Ветвь выключателя GIT: все, что вам нужно знать

июля 15020205. в 15:10

CloudBees

Изучение Git с помощью Bitbucket Cloud

4 марта 2020 г. в 17:14

Atlassian

Автоматическое развертывание сайта Gatsby на Firebase Hosting

9:00 16:01 26 июня 9110002 CircleCI

Как Raygun обрабатывает миллионы событий ошибок в секунду

17 мая 2018 г., 1:38

Raygun

Какие есть альтернативы Git и gulp?

GitHub

GitHub — лучшее место для обмена кодом с друзьями, коллегами, одноклассниками и совершенно незнакомыми людьми. Более трех миллионов человек используют GitHub, чтобы вместе создавать удивительные вещи.

SVN (Subversion)

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