Рубрика «gulp»

в 2:04, , рубрики: css, gulp, html, javascript, node.js, pug, scss, автоматизация, автоматизация рутины, Разработка веб-сайтов, сборка проекта

Начало

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

Не только древность моей сборки мотивировала на эту статью, но и еще одна причина: мне больно смотреть, когда заходят на онлайн-сервисы для конвертации scss, минификации javascript и других рутинных задач. Самое забавное — когда сделали мелкую правку, снова нужно проходить все круги ада копипаста.

Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить.

Читать полностью »

в 20:11, , рубрики: css, gulp, html, media queries, sass, scss, препроцессоры, Разработка веб-сайтов

Я считаю, что в последнее время разница размера экранов между разными группами устройств всё больше размывается. Не смотря на это я попытался написать инструмент для определения, как групп устройств (мобильники, планшеты, лаптопы, десктопы), так и конкретных девайсов (iPhone 5, iPhone X, iPad Pro 12 и т.д.). Получилась, на мой взгляд, довольно удобная пачка SASS-миксинов. И что немаловажно, инструмент прост в использовании, а также позволяет расширять список устройств своим без правки исходников.
Sass MediaScreen — Определяем девайсы на CSS - 1
Читать полностью »

в 9:21, , рубрики: continuous delivery, continuous integration, elegion, Git, github, gitlab, gulp, javascript, success story, Блог компании e-Legion, Разработка веб-сайтов

Недавно мы сделали то, о чём грезят все программисты и дизайнеры — переписали всё с нуля: полный редизайн нашего сайта и написание «движка» с чистого листа. Ниже поведаем о мотивации и процессе миграции с онлайн-CMS на статику.

Перенос сайта на статику: мотивация, стоимость, работа - 1

Читать полностью »

в 2:56, , рубрики: bower, dapp, devops, docker, gulp, javascript, npm, Блог компании Флант, системы сборки

Сборка проектов с dapp. Часть 2: JavaScript (frontend) - 1

Этот материал продолжает цикл о сборке Docker-образов для приложений на различных языках программирования с помощью утилиты dapp. Предыдущая статья была о сборке приложений на Java — теперь же поговорим о приложениях на JavaScript. Для начала это будет frontend-приложение, а в следующей части планируется рассказать о сборке backend'а и запуске всего в Kubernetes.

В качестве иллюстрации будут использованы приложения nodejs-pool и poolui. Да-да, подготовим к запуску в Kubernetes свой майнинг-пул с блокчейном и выплатами!Читать полностью »

в 19:21, , рубрики: css, gulp, html, mixin, scss, адаптивная вёрстка, Компиляторы

Приветствую!

Примерно месяц назад я написал статью, в которой выдвинул идею об оптимизации @media screen. Идея заключается в том, чтобы иметь возможность писать значения для всех экранов в одну строку. Более подробно можете почитать по ссылке. Большинство комментариев — это критика относительно реализации, к сожалению идей никто не подкинул. Но если посмотреть с другой стороны, из каждой критики можно вытащить идею, поэтому опираясь на мнение читателей, я поставил себе цель написать миксин, который:

  • легко читается (максимально повторяющий синтаксис sass/scss/css);
  • легко поддерживать (чтобы через год ты понимал, что там написано);
  • гибкий (поддержка максимального количества описаний @media);

Давайте посмотрим, что у меня вышло (репозиторий Github)!
Читать полностью »

в 9:02, , рубрики: css, gulp, html, mixin, scss, адаптивная вёрстка, Компиляторы

Доброго времени суток, коллеги!

Давно задавался вопросом, как оптимизировать и сделать более удобным код используя @media screen. Ибо код

body{font-size: 1em;}
@media screen and (max-width: 1024px){
    body{font-size: 0.8em;}
}

создает достаточно крупные файлы.Читать полностью »

в 14:40, , рубрики: async, browserify, gulp, javascript, nodejs, Stream, потоки

Всем привет. Если вы связаны хоть как-то с JS, вы наверняка слышали о таком приложении как gulp. А возможно даже и использовали. По своему опыту могу сказать, что «въехать» в то, как с ним работать бывает сложно, хотя ключ к пониманию лежит на поверхности. Поэтому и публикую этот материал, надеясь, что он станет полезным.

Так же, на основе данного материала был снят видеоролик, так что можете выбирать, в каком виде потреблять.

Читать полностью »

в 7:39, , рубрики: acronis, components, design system, fonts, front-end, gulp, icons, product design, svg, UI, UX, Блог компании Acronis, Inc, веб-дизайн, интерфейсы

Дизайн–система Acronis. Часть вторая. Иконки, SVG шрифты, Gulp - 1

Меня зовут Сергей, и я все еще работаю старшим дизайнером в компании Acronis. Мы продолжаем оптимизировать работу отдела дизайна продуктов для бизнеса и все больше интегрируемся в процессы на стороне front-end разработки.

В прошлой статье я рассказывал о создании библиотеки компонентов, выборе инструментов и взаимодействии с разработчиками. В этой статье я сделаю акцент на мелочах. Расскажу про SVG шрифты, работу с иконками и приправлю рассказ толикой автоматизации с использованием Gulp.Читать полностью »

в 8:20, , рубрики: docker, gulp, nodejs, openapi, ReactJS, swagger, zabbix api, Разработка веб-сайтов

Всем привет!

Все началось с интеграции телефонной платформы в корпоративный сайт.

Будучи инженером VoIP телефонии, WEB-разработка поразила разнообразием подходов и методов реализации. Стек технологий пестрит разнообразием, выбор инструментов определяет стиль разработки, модульность или закостенелость проекта.

Про телефонную платформу я напишу в следующий раз. Сильный уклон в VoIP-специфику отвлечет от главного — методов разработки современного SPA-приложения.

В статье будет описан процесс внедрения стороннего сервиса в существующую рабочую среду.

Сегодня поиграемся с Zabbix-API.

image
Читать полностью »

в 11:06, , рубрики: contribution, dita, github, gulp, javascript, markdown, open source, xliff, Блог компании Яндекс, документация, комментирование кода, Локализация продуктов, Совершенный код, спеллер

При разработке документации мы руководствуемся не только стандартами, но и удобством её использования. Стандарты определяют состав и форму документации, а формат строится исходя из удобства. Разработчик Сергей Бочаров рассказывает о пути Markdown-документа и о проблемах, которые приходится решать в обмен на простоту использования этого формата.

У меня иногда складывается впечатление, что не он служит для нас, а мы служим для этого формата. Поэтому — сэр Markdown.

Читать полностью »

123...4
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js