Представляем СПРО | Кодементор

PRO (произносится как /es-pro/) или Starter Project CLI — лучшая отправная точка для вашего следующего проекта. SPRO стремится создать идеальную среду разработки, изучив архитектуру вашего проекта, а затем настроив задачи Gulp для всех ваших нужд.

Он очень гибкий и может сэкономить вам огромное количество времени, которое вы обычно тратите на настройку своего проекта.

👉 SPRO находится на ранней стадии, и мы будем признательны за каждое предложение, отзыв или помощь!

Почему Глоток

В группе Frontend Developers Slack была большая дискуссия об инструментах сборки (теперь они устарели, перемещены в Раздор). Некоторые разработчики предпочитают Parcel, потому что он быстрый и просто работает (так они говорят), некоторым разработчикам нравится писать npm-скрипты чтобы избежать новых уровней абстракции, а некоторым разработчикам нравится использовать CodeKit или Makefiles, о которых я раньше даже не знал.

В другой отличной статье Почему npm-скриптыДэймон Бауэр очень красиво сказал:

«…если вас устраивает ваша текущая система сборки и она выполняет все, что вам нужно, вы можете продолжать ее использовать!»

— Дэймон Бауэр, Почему npm-скрипты

Среди других замечательных инструментов сборки, таких как Grunt, Webpack, Parcel или даже скрипты npm, мне больше всего нравится Gulp, потому что я лучше всего знаком с этим фантастическим инструментом. Мне нравится идея, что каждую задачу можно изолировать, а файлы проекта можно использовать как отдельные объекты. Тем не менее, стоит подумать о переключении на сценарии npm.

О СПРО

Около года назад я начал работать над своим сайд-проектом, Стартовый проект. Starter Project задуман как шаблон последних лучших практик, упакованных в задачи Gulp. Вместо того, чтобы копировать и вставлять код из одного проекта в другой, почему бы не создать единый пакет, который можно было бы повторно использовать в различных проектах, с одним файлом конфигурации, который можно было бы легко обновить.

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

Узнайте больше об идее и возможных проблемах, которые пакет Starter Project пытается решить. во вводной статье с прошлого года.

Как это работает

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

Когда вы ответите на все вопросы, SPRO сохранит информацию в .starter-project.json файл. Он также подготовит команду для установки всех зависимостей на основе ваших ответов.

Помимо основного файла конфигурации, SPRO добавит файлы задач Gulp и другие файлы конфигурации в gulpfile.js каталог.

«Разрешение модуля узла позволяет заменить gulpfile.js файл с каталогом с именем gulpfile.js который содержит index.js файл, который рассматривается как gulpfile.js. Затем этот каталог может содержать ваши отдельные модули для задач».

— Документация Gulp.js 4

Задачи, определенные в SPRO, могут обрабатывать ваши HTML, CSS, JavaScript, шрифты, значки и графические файлы. Задачи Gulp будут обрабатывать все файлы на основе файлов конфигурации в gulpfile.js каталог.

SPRO имеет множество функций в одном месте, так что вы не забудете добавить что-то в свой проект. Функции включают в себя извлечение Critical CSS, добавление BrowserSync для упрощения разработки, анализ файлов HTML, Sass и JavaScript, а также добавление исходных карт и механизма шаблонов pug.

Есть большая вероятность, что задачи Gulp будут работать для вас с первой попытки. Но если вам не повезло, не сомневайтесь: большинство ошибок можно устранить в течение нескольких минут путем отладки проблемы и обновления отдельных файлов конфигурации. Ты мог смотреть видео и узнайте, как работает SPRO.

Монтаж

SPRO доступен в виде модуля npm, и вы можете установить его локально или глобально.

npm install starter-project-cli

👉 Профессиональный совет: установить с использованием тихой опции, --silent или же -sтак как подавленный вывод может ускорить процесс установки.

Теперь вы сможете запустить команду из терминала, что сэкономит вам значительное количество времени в будущем.

Команда

Чтобы проверить, доступна ли команда, попробуйте выполнить следующие команды: spro --version а также node_modules/.bin/spro --version для глобальной и локальной установки соответственно. Вы должны увидеть номер версии в своем терминале.

Команда, которую вы хотите запустить, spro start. Вам будет предложено ответить на вопросы о структуре проекта, как упоминалось ранее.

Зависимости

Как только вы ответите на все вопросы, SPRO отобразит (и скопирует в буфер обмена) команду для установки зависимостей для вашего проекта.

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

Чтобы проверить все возможные зависимости, перейдите к Страница SPRO на GitHub.

Задачи

Для разных типов разработки доступны три основные задачи Gulp:

• gulp default для запуска всех задач (полезно для более тщательного процесса разработки),
• gulp build для запуска всех задач с процессом выхода (полезно, например, для сборок Netlify), и
• gulp dev для выполнения только основных задач (полезно для основного процесса разработки).

Эти задачи являются наборами многих других подзадач. Подзадачи будут выполняться в зависимости от параметра глобальной конфигурации. Если вы решите не запускать задачи CSS, подзадачи на основе CSS будут пропущены (и зависимости Gulp будут опущены).

Все подзадачи разделены по типу файла и основной функции. Подзадачи, связанные с CSS, можно найти в gulpfile.js/css.js файл, а подзадачи, связанные с извлечением критических CSS, можно было найти в gulpfile.js/critical.js файл.

Каждая подзадача имеет свой файл конфигурации. Конкретную конфигурацию CSS можно найти в gulpfile.js/.css.json файл, а соответствующую конфигурацию Critical CSS можно найти в gulpfile.js/.critical.json файл.

👉 Вы можете редактировать каждый отдельный файл конфигурации вручную. Однако основной файл конфигурации, .starter-project.json файл, не следует редактировать вручную. Есть большая вероятность, что в вашем проекте не будет всех зависимостей для выполнения задач Gulp. Вместо этого запустите spro команда снова.

Курс

Я создал курс где вы можете узнать больше о SPRO.

Курс бесплатный, но нужно иметь Обмен навыками аккаунт для просмотра всех уроков. Обязательно завершите классный проект и оцените курс. 🆓

Вывод

Я призываю всех попробовать SPRO. Буду признателен за любую обратную связь, даже если SPRO не подходит для вашего проекта.

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

Пожалуйста, покажите свою поддержку, отметив проект звездой на Гитхабили поделившись на Твиттер. 🙏

Или внести свой вклад в проект, создав новый выпуск или же запрос на вытягивание.