Gulp rigger: Плагин для gulp — собираем файлы по кусочкам / Хабр

Leave a Comment / Разное / By /

Верстка сайта + js • freelance job for a specialist • category JavaScript ≡ Client Edward Rafalovsky

Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską weкrsję?

Tak

3 of 3

closed without completion

  1. publication

  2. open for proposals

  3. closed without completion


Необходимо сверстать сайт из 6 страниц, респонсив (3 макета на страницу под разные разрешения). Все страницы состоят из повторяющихся блоков по-этому необходимо использовать сборщик (gulp-rigger или аналог) для упрощения разработки и отсутствия дублирования кода. Блоки описаны отдельно для удобства разработки. Эстимейт — 7 дней.
Более детальное описание, а также ссылки на исходники в PDF аттаче или GoogleDoc по ссылке:

https://docs.google.com/document/d/1YGQN4w4sWamSKxm66Xu91-3wTe8GJx_7fwVNcC4bq0w/edit#

Applications 1

App view is available only registered users.

  • Proposals 8
  • Declined 1
  • Withdrawn 1

date online rating cost time to complete


  1. 7 days8000 UAH

    7 days8000 UAH

    Здравствуйте, наша студия готова приступить к заказу.
    Для отсутствия дублирования кода мы будем верстать на современном фреймворке vue.js, который использует компоненты

  2. 14 days7500 UAH

    14 days7500 UAH

    Доброго дня. Цікавить Ваша пропозиція. Я представляю компанію LogicArt, яка займається створенням веб-сайтів. Портфоліо можна переглянути на нашому сайті http://logart.

    com.ua
    Будемо раді співпраці.
    email — [email protected]
    тел — 0667150239 (viber/telegram)

  3. 5 days5000 UAH

    5 days5000 UAH

    Здравствуйте, заинтересовало ваше предложение о работе.
    Использую компонентный подход в вёрстке, что ускорит добавление нового контента или целых страниц на сайт.
    Для сборки использую Gulp, для оптимизации сайта, что ускорит загрузку и уменьшит вес самого сайта на 20-30%.
    В работе использую HTML, CSS(Sass), jQuery, JS, Bootstrap.
    Адаптация сайта под все устройства, включая разрешение 320px.
    Адаптация возможно при помощи бутстрапа или медиа запросов(для большей гибкости на разных разрешениях).
    Код чистый, понятный, без лишний комментариев,кроссбраузерный , валидный.

  4. proposal concealed by freelancer

  5.  freelancer isn’t working in the service any longer

  6. 875″ data-days=»5″ data-lastactivity=»1532930110″>

    5 days2500 RUB

    5 days2500 RUB

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

    (не обращайте внимание на рейтинг)

  7. 7 days100 UAH

    7 days100 UAH

    Добрый день. Я представляю команду разработчиков из Запорожья. Заинтриговал ваш проект. Готовы взяться за выполнение поставленной задачи.

    Давайте подробней обсудим все детали проекта.

    С уважением,
    Александр.

  8. 10 days5000 UAH

    10 days5000 UAH

    Здравствуйте, ReactJs+webpack будет лучшим решением для вашего проекта.

    Делаем быстро и качественно. Пишите, обсудим детали.

  1.  freelancer isn’t working in the service any longer

  1. proposal withdrawn


4 years ago

166 views

  • PHP
  • html
  • Javascript
  • css
  • jquery
  • HTML5
  • css3

Документация по front-end части Биржи оборудования

Репозиторий проекта на GitHub.

Установка

Для установки вам понадобится Node.js и Gulp

  • После клонирования репозитория в папке проекта выполнить npm install, эта команда выполнит установку всех зависимостей проекта;
  • Корневой каталог файлов проекта
    /assets    , в нем находятся 3 папки: src — папка с рабочими файлами, build — собранная версия проекта, prodaction — продашн версия проекта. До первого выполнения gulp и gulp prodaction доступна только версия с рабочими файлами.
  • В файле /assets/src/dist/style.main.scss находятся комментарии о преобразовании ключевых файлов, выполнить их. Проблема в том, что Sass не поддерживает автоматическое преобразование .css в .scss. Подробнее о том, как работает директива @import в Sass;
  • Для запуска build-версии проекта, в корне проекта выполнить: gulp;
  • Prodaction версия доступна после компиляции build-версии, для получения prodaction выполнить gulp prodaction;
  • Все таски для сборки находятся в файле gulpfile.js.

Используемые иструменты

Все используемые плагины и библиотеки перечислены в файле package.json в разделе devDependencies. Sass используется с синтаксисом scss.

Для добавления критического css в <head></head> страницы используется critical.

Картинки загружаются лениво с помощью lazyloadxt.

Для ключевых файлов .js и .css создается sourcemap

Для сборки проекта используется Gulp.

Структура

Данный проект, предполагает следующую структуру файлов:

  • Рабочие файлы находятся в папке assets/src, любые изменения должны проиходить только в этой папке, т.к. папки build и prodaction генерируются на основе нее;
  • html файлы хранятся непосредственно в папке assets/src, сопутствующие файлы, такие как .scss, .js .jpg и др. находятся в папке assets/src/dist;
  • Все необходимые файлы плагинов подлючаются с помощью gulp-rigger из папки node_modules, для css — файлы подключаются с помощью sass директивы @import. Компилируются исходники в единые файлы, в случае с css это — assets\build\dist\css\main.css, для js — assets\build\dist\js\critical. js и assets\build\dist\js\main.js;
  • Части html кода импортируются с помощью gulp-rigger в build версию html-файлов. Части находятся в папке
    assets\src\dist\template    ;

Структура css

Все рабочие файлы css находятся в папке assets\src\dist\style.

  • Перечень главных подключаемых файлов, таких как файлы библиотек и плагинов, расположен в assets\src\dist\style\main.scss;
  • Перечень подключения своих расположен в файле assets\src\dist\style\my.scss;
  • Sass переменные расположены в файле assets\src\dist\style\variables.scss.

Структура css — модульная, каждая сущность расположена в своем файле. Например стили для хедера страницы — style\block\header\_header.scss, типографика style\block\typography\_typography.scss и т.д. Медиа запросы хранятся в папке блока.

Для более удобной навигации по .scss файлам, используйте sourcemap:

Разделы css:
  • Блоки — style\block\;
  • Шрифты — style\fonts\;
  • Иконки — style\icons\;
  • Страницы (если требуются стили индивидуально для опр. страницы) — style\pages\;
  • Типографика — style\typography\;
  • Утилиты — style\utilities\;
Медиа запросы

Все медиа запросы сущности, хранятся в папке этой сущности. Для примера возьмем хедер страницы. Стили этого блока находятся в файле style\blocks\header\_header.scss, а медиа запросы хранятся в style\blocks\header\_header-mediaqueries.scss;

Структура JS

Сбор js предполагает создание 2 js файлов:

  • js\critical.js — Критические файлы, требущиеся для показа первого экрана страницы;
  • js\main.js — Некритические файлы плагинов и всего остального.

Подключение файлов происходит посредством gulp-rigger. Перечни подключений:

  • js\critical.js и js\main.js что они подключают — сказано выше.
  • js\my.js — подключение самописных js файлов.

Разбиение самописных js файлов так же происходит по типу модульности, например скрипты для формы обратной связи хранятся в файле

js\form\form. js, для взаимодейтсвия с товаром js\goods\goods.js и т.п.

Вызов плагинов происходит на требуемых страницах, например если на странице index.html мне нужен слайдер slick, перед закрывающим тегом <body></body> я добавляю скрипт $('#products').slick({}) . Если плагин используется на всех страницах — пишу его вызов в файле js\my.js, например валидация телефона $('[type="tel"]').mask("+7 (999) 999-99-99").

Шрифты

Шрифты хранятся в директории dist\fonts. Подключение шрифтов происходит по средствам директивы @font-face. Файл подлючения находится в style\fonts\_fonts.scss

Изображения

Все изображения хранятся в папке dist\img. В build и prodaction версии отправляются уже минифицированные варианты. Минифицируются .png, .jpg и .svg расширения

Серверные скрипты

Все серверные скрипты располагаюстся в директории dist\server

html-блоки

Все подлючаемые html-блоки расположены в папке dist\template\. Обычно там хранятся повторяющиеся куски кода, такие как хедер, футер, карточка товара и т.п.

Built with MkDocs using a theme provided by Read the Docs.

gulp-rigger — Анализ работоспособности пакетов npm

Все уязвимости безопасности относятся к производственных зависимостей прямых и косвенных пакеты.

Угроза безопасности и лицензии для основных версий

Все версии

Версия Уязвимости Лицензионный риск
2
|
 02/2014

Популярный

  • C
  • H

  • 1

    M
  • L
  • H
  • M
  • L

Лицензия
Массачусетский технологический институт

Политика безопасности
Нет

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (994)

Скачать тренд

Иждивенцы
50

Звезды GitHub
44

Вилки
4

Авторы
3

Популярность прямого использования

Пакет npm gulp-rigger получает в общей сложности 994 загрузки в неделю. Таким образом, мы забили Уровень популярности gulp-rigger будет ограничен.

На основе статистики проекта из репозитория GitHub для npm package gulp-rigger, мы обнаружили, что он снялся 44 раза, и это 50 других проектов в экосистеме зависят от него.

Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.

Частота фиксации

Нет последних коммитов

Открытые проблемы
11

Открытый заказ на продажу
0

Последняя версия
9 лет назад

Последняя фиксация
7 лет назад

Дальнейший анализ состояния обслуживания gulp-rigger на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Неактивный.

Важным сигналом обслуживания проекта, который следует учитывать gulp-rigger, является это не видел никаких новых версий, выпущенных для npm в за последние 12 месяцев и может считаться прекращенным проектом или проектом, который получает мало внимания со стороны его сопровождающих.

За последний месяц мы не обнаружили никаких запросов на вытягивание или изменений в статус issue был обнаружен для репозитория GitHub.

Совместимость с Node.js
не определено

Возраст
9 лет

Зависимости
2 прямых

Версии
3

Установочный размер
0 Б

Распределенные теги
1

Количество файлов
0

Обслуживающий персонал
1

Типы TS
Нет

gulp-rigger имеет более одного и последнего тега по умолчанию, опубликованного для пакет нпм. Это означает, что для этого могут быть доступны другие теги. пакет, например рядом, чтобы указать будущие выпуски, или стабильный, чтобы указать стабильные релизы.

Правильный путь — шаблон администратора Bootstrap 4 от Aqvatarius

  • Добавить в избранное
  • Добавить в коллекцию

предварительный просмотр/01_preview.jpg предварительный просмотр/02_default_layout.jpg предварительный просмотр/03_boxed_layout.jpg предварительный просмотр/04_indent_layout.jpg предварительный просмотр/05_indent_full_featured.jpg предварительный просмотр/06_login.jpg

Предварительный просмотр в реальном времени Скриншоты

Встречайте правильный путь — шаблон администратора Bootstrap 4

The Right Way — совершенно новый шаблон администратора, основанный на Bootstrap 4. Это мощный, отзывчивый и удобный для разработчиков инструмент. Мы сделали все возможное, чтобы сделать вашу работу намного проще.

Шаблон полностью основан на препроцессоре Sass , включает все функции и элементы отдельно друг от друга. Сторонние плагины, такие как Bootstrap 4 toolkit изменены в отдельном файле, что дает вам возможность легко обновлять все плагины и расширения. Пакет также включает шаблон css версии , скомпилированный из файлов Scss.

The Right Way включает три мощных варианта макета , каждый из этих макетов можно изменить с помощью настроек и он совместим со всеми функциями шаблона. Все компоненты макета (шапка, страница-контейнер, боковая панель, боковая панель, контент, фиксированная панель и т. д.) независимы и могут использоваться по своему усмотрению. В то же время они взаимодействуют друг с другом, если используются на странице. Мы создали светлых и темных (инвертированных) режимов, каждый элемент и контейнер можно менять на разные режимы независимо друг от друга. А еще это легко настроить шаблон и создать свои собственные новые скины.

В загруженном пакете вы найдете:

  • Документация с подробными инструкциями как начать установку всего необходимого для работы и как пользоваться шаблоном.
  • Проект The Right Way на базе Gulp (gulp-sass, gulp-watch, gulp-rigger, gulp-rimraf, синхронизация с браузером и т. д.).
  • Хорошо структурированный и прокомментированный исходный код.
  • Скомпилировано и готово к использованию файлов шаблонов (папка сборки).
  • Дружественные разработки файлов (папка dev), с отдельными файлами Sass и частичными файлами (на основе gulp-rigger), что помогает сделать код чистым, сегментированным и читабельным.
  • Три мощных варианта макета помогут вам создать свой уникальный стильный шаблон администратора. Также мы разработали настроек шаблона , чтобы продемонстрировать все возможности шаблона.
  • Потеряно готовых к использованию страниц, таких как галерея, faq, страница входа, страница регистрации, список платежей и многое другое.
  • Пакет Бизнес-решения для вашего стартап-проекта: Банковское дело, Маркетинговые исследования, CRM-система, Умный дом и Торговая платформа. Как пример возможностей шаблона The Right Way .
  • тонн элементов и компонентов можно использовать везде в нашем шаблоне. Также мы включаем множество сторонних плагинов, которые уже оформлены и готовы к использованию.
  • И многое другое…

В пакете загрузки вы получите ту же версию и элементы, что и в режиме предварительного просмотра.
Изображения для предварительного просмотра не включены в пакет (заменены заполнителями).

 

Поддержка The Right Way доступна 24/7 . Не стесняйтесь присылать свой вопрос или предложение. Мы сделаем все возможное, чтобы помочь вам.

Посмотрите предварительный просмотр в реальном времени и не забудьте посетить все страницы и попробовать все параметры в настройках. Не забудьте лайкнуть страницы шаблона, если вам это, конечно, нравится

Кредиты

  • Animate.css
  • Начальная загрузка
  • Chart.js
  • Кодовое зеркало
  • Пользовательский скроллер контента
  • Таблицы данных
  • Зона сброса
  • Выбор диапазона дат
  • Bootstrap Datetimepicker
  • электронные карты
  • ШрифтПотрясающий
  • Полный календарь
  • Ion. RangeSlider
  • Изотоп
  • jQuery
  • jQuery-интерфейс
  • Ручка jQuery
  • Лайтбокс
  • Линеариконы
  • Плагин маскированного ввода
  • momentjs. com
  • Пити
  • Рати
  • Выберите2
  • SmartWizard
  • Летняя заметка
  • Проверка формы

Список изменений

20 мая 2018 г.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *