Стартовый проект — набор новейших передовых практик, упакованных в задачи Gulp.

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

Первый сценарий

Каждый проект имеет свое окружение. Переключение между проектами означает переключение среды. Переключение среды означает запоминание команд для выполнения задач проекта, таких как Gulp или webpack. Но слишком часто команды забываются. Этот сценарий происходит со мной ежедневно, даже при работе над похожими проектами.

Второй сценарий

Рассмотрим два разных проекта. Во-первых, это разработка темы для WordPress, во-вторых, это блог Middleman. Оба проекта используют средство запуска задач Gulp для компиляции и оптимизации ресурсов. Настройка задач Gulp для любого проекта требует много времени. И каждый проект имеет свою архитектуру, которая не позволяет разработчику копировать задачи Gulp из одного проекта в другой, не тратя время на перенастройку каждой задачи Gulp по отдельности.

Третий сценарий

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

Идея

Я уверен, что эти сценарии звучат знакомо. Это случалось со мной много раз. Я даже не могу вспомнить, сколько раз я создавал миксин Sass или функцию JavaScript в проекте, который хотел использовать в другом проекте, но мне было лень искать код, и в конце концов я начал с самого начала.

Starter Project — это моя попытка решить эти проблемы. Это набор задач Gulp с последними передовыми методами разработки интерфейса. Но не только задачи Gulp. Он содержит все ресурсы для создания успешного проекта, от HTML и CSS до JavaScript и изображений.

Посылка

Пакет доступен на нпм. Вы можете найти инструкции по установке в официальная документация. После установки у вас будет копия веб-сайта пакета для стартового проекта. Это может стать хорошей отправной точкой для вашего нового проекта.

Стартовый пакет также является генератором статических страниц, очень примитивным. Оригинальный веб-сайт создан с использованием Starter Project и размещен на Netlify. Это очень быстро, см. Статистика PageSpeed а также Веб-страницаТест баллы.

Пакет следует использовать в качестве зависимости разработки. Это позволит вам обновлять пакет и более эффективно поддерживать ваш проект.

файл package.json

Использование

Стартовый проект имеет три разные команды Gulp для разных сред:

  • gulp dev а также gulp dist для сборки разработки,
  • gulp docs для сборки документации и
  • gulp для производственной сборки.

Чтобы узнать больше о командах, см. официальная документация.

С Starter Project вы получаете архитектуру для:

  • HTML,
  • CSS,
  • JavaScript,
  • изображения (.png, .jpg, .svg),
  • фавиконки,
  • шрифты,
  • и более.

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

Файл конфигурации

Стартовый проект настраивается и должен работать в любом проекте, независимо от архитектуры. Основной файл конфигурации можно найти в корне проекта, config.json. Для каждой задачи есть вариант run. Если установлено значение true, задача будет запущена. Например, вы можете отключить penthouseбиблиотека для создания Critical CSS.

конфигурация пентхауса

Подробнее о конфигурации здесь.

Функции

Я упомянул критический CSS в предыдущем разделе. Starter Project имеет и другие замечательные функции.

Мопс является шаблонизатором по умолчанию. Markdown также поддерживается фильтром Pug. jstransformer-уценка-это. Я должен рассмотреть возможность добавления поддержки большего количества механизмов шаблонов, если будет проявлен интерес.

Сасс поставляется с нормализовать.css, модульныймасштаб-дерзкий а также sass-mq библиотеки по умолчанию. Это поможет вам создавать более согласованные страницы со строго определенной типографикой и медиа-запросами.

Starter Project поддерживает ES6 через плагин Babel. Вы найдете скрипты для отложенной загрузки файлов CSS (используйте в сочетании с Critical CSS) и для загрузки шрифтов с Критический метод FOFT.

Если вы не используете сторонний сервис для размещения изображений, Starter Project может оптимизировать ваши изображения. Стартовый проект поддерживает
.gif, .png, .jpgа также .svg файлы.

Документация является неотъемлемой частью каждого проекта. Вы можете создать отличную документацию, используя Starter Project. SassDoc будет анализировать комментарии Sass и создавать документацию Sass. JSDoc будет анализировать комментарии JavaScript и создавать документацию JavaScript. Вы даже можете создать живое руководство по стилю. Стартовый проект использует КСС для анализа комментария Sass для этой цели.

Есть и другие полезные функции, такие как синхронизация с браузером, фавиконы, исходные карты, Gzip, линтеры, стандарты, editorconfig и многое другое. Я постараюсь все задокументировать и написать об этом новые статьи. Следите за обновлениями!

Веб-сайты

До сих пор я использовал Starter Project в нескольких разных проектах.

Вывод

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

Покажите свою поддержку: оставьте отзыв, откройте новый выпускСоздайте новый пулреквестили оставить комментарий.

Похожие записи

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

Ваш адрес email не будет опубликован.