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

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

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

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

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

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

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

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

Идея

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

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

Пакет

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

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

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

файл package.json

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

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

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

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

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

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

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

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

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

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

Узнать больше о конфигурации здесь.

Функции

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

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

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

Starter Project поддерживает ES6 через плагин babel. Вы найдете сценарии для отложенной загрузки файлов CSS (используйте его в сочетании с Critical CSS) и для загрузки шрифтов с помощью Критический метод БПФ.

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

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

Есть и другие полезности, такие как Browser-sync, Favicons, Sourcemaps, Gzip, Linters, Standards, editorconfig и другие. Я постараюсь все задокументировать и об этом тоже напишу новые статьи. Быть в курсе!

Сайты

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

Вывод

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

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

.

Статьи по Теме

Snowpack + Eleventy + Sass + PostCSS

Мне удалось создать установку Eleventy + Snowpack + Sass + PostCSS, которая работает очень хорошо. Я хочу поделиться с вами этой настройкой в ​​этой статье.…

Ответы

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