✔ Простой стартовый проект, обеспечивающий более быструю доставку проектов и/или:
- автоматическое развертывание страниц GitHub
- Публикуйте выпуск в GitHub
Это дает пример проекта, который автоматизирует задачи с глотком, включая:
В этом проекте есть некоторые резервы, которые вам необходимо встретить, чтобы скомпилировать его.
Чтобы начать использовать проект, вам нужно клонировать его на свой компьютер с помощью команды GIT, замените [your-project] на имя вашего проекта:
git clone https://github.com/adorade/startit.git [your-project]Перейдите к папке:
cd [your-project]Установить зависимости:
yarn install Обратите внимание, что версии модуля были зафиксированы для гарантирования совместимости. Запустите yarn outdated и обновляйте package.json по мере необходимости.
Чтобы начать использовать его, единственное, что вам нужно сделать, это открыть проект для вашего редактора кода и кода. Чтобы скомпилировать и жить предварительно просмотреть все ваши изменения, у вас есть некоторые команды, которые помогут вам. Вот список команд, которые вы должны знать.
Каждая команда должна быть выполнена в корневом каталоге проекта, используя команду Gulp, например, gulp cleaner или gulp build :
| Задача | Описание |
|---|---|
| чистящее средство | Удалить все скомпилированные файлы |
| линтер | Стили ворса, сценарии и мопс |
| стили | Скомпилировать стили нах |
| сценарии | Скомпилируйте файлы JavaScript |
| шрифты | Копировать шрифты |
| Статика | Скопируйте статические файлы |
| изображения | Оптимизируют изображения |
| страницы | Скомпилировать шаблоны мопса |
| служить | Запустите сервер и следите за любыми изменениями |
| строить | Построить проект |
| девчонка | Скомпилировать и следить за изменениями |
| развертывать | Развернуть файлы на страницы GitHub |
| выпускать | Публикуйте выпуск в GitHub |
| по умолчанию | Задача по умолчанию |
| чеки | Проверьте конфигурацию Gulp |
| помощь | Распечатать сообщение справки |
Запустить gulp --tasks чтобы увидеть все доступные задачи Gulp.
Если вы находитесь в разработке, команда gulp dev - лучший выбор для вас. Перейдите в папку Project в консоли и выполните gulp dev , он составит проект и запустит сервер, который будет обновляться каждый раз, когда вы что -то меняете в коде.
Gulp будет следить за изменениями и расскажет вам, как получить доступ к проекту из местного и публичного URL.
Каждый браузер, который указывает на этот URL -адрес, будет автоматически обновлен. В качестве дополнительной функции для тестирования целей тестирования любое взаимодействие в одном браузере будет отражено на любых других. Попробуйте одновременно на телефоне, планшете и ПК.
Проект имеет очень простую и гибкую структуру. Если место по умолчанию для любого файла или каталога необходимо перемещать, обязательно обновите новую позицию в файле tool/util/config.js .
├── dist - > All the compiled files will be placed here (Production)
├── logs - > Logs files
├── src - > Source files for the project
│ ├── es6 - > Scripts
│ ├── fonts - > Fonts
│ ├── images - > Images
│ ├── scss - > Sass
│ ├── static - > Favicons...
│ ├── vendors - > Vendors folder for all the dependencies
│ └── views - > Templates directory for Pug files
├── test - > Tests Files
├── tmp - > All the compiled files will be placed here (Development)
├── tools - > Project tools and configuration
│ ├── build - > files for build
│ ├── tasks - > tasks files for gulp
│ └── util - > config and options for project
├── package.json - > NodeJS configuration file
├── gulpfile.esm.js - > Gulp tasks
├── README.md - > README
└── ... config files for packages Все файлы в папках dist и tmp будут автоматически сгенерированы различными задачами, когда проект компилируется. Обязательно не изменяйте какой -либо файл вручную в этих папках, потому что изменения будут заменены в процессе компиляции.
У этого проекта есть несколько хороших вариантов конфигурации, чтобы удовлетворить все, что вам нужно. Для настройки необходимо отредактировать следующие файлы и изменить любое значение, которое вам нужно:
tool/util/banner.js - баннер для сценариев и файлов стилейtool/util/config.js - Конфигурация проектаtool/util/options.js - Параметры для плагинов После каждого изменения, которое вы внесли, проверьте с помощью gulp checks если все в порядке, и ошибок нет.
Каждый аспект этой конфигурации описан в файле, чтобы вы знали варианты.
Запустите в режиме разработки вживую нагрузку:
yarn run start
# or
gulp
# or
gulp dev Перейдите к http://localhost:1234/ или External URL, если он доступ с другого устройства.
Найдите полный список задач:
gulp -T
# or
gulp -T --tasks-depth 0 Установите NODE_ENV на production , чтобы задачи Gulp создали окончательный код, то есть министерство файлов и отключить генерацию Sourcemap.
yarn run build
# or
gulp build --production Установите NODE_ENV на production вручную в зависимости от вашей ОС:
Linux/Mac OS:
NODE_ENV=production
gulp build (или inline NODE_ENV=production gulp build
Windows PowerShell:
$ env: NODE_ENV = " production "
gulp buildКомандная строка Windows Legacy:
set NODE_ENV = production
gulp build Для автоматического развертывания вашего проекта на страницы GitHub и сделать его доступным по https://[your-username].github.io/[your-project-name] Использование:
yarn run deploy
# or
gulp build --production && gulp deployЧтобы опубликовать выпуск для использования GitHub:
yarn run release
# or
gulp releaseЭтот проект лицензирован по лицензии MIT