Настроить Git и сборку проекта на ProcessWire

Открываем папку с проектом, инициализируем Git командой - git init.

Далее создаем файл .gitignore и размещаем туда код для ProcessWire, если нужно то меняем.

.gitignore

.DS_Store
.vscode
.parcel-cache
_remote
node_modules
wire
dist
utilites
site/config.php
site/assets/logs
site/assets/backups
site/assets/sessions
site/assets/cache
site/assets/dist
site/assets/files
package-lock.json
robots.txt
sitemap.xml

После создаем первый коммит.

Запустим команду npm init.

Для простоты создадим файл package.json, либо инсталлировать нужные пакеты через npm install. Информацию о пакетах можно получить командой npm search.

package.json

{
	"name": "RentWhizz-site",
	"version": "2.0.0",
	"description": "Landing for Whizz site",
	"source": "scripts/main.js",
	"browserslist": "> 0.5%, last 2 versions, not dead",
	"targets": {
		"legacy": {
			"includeNodeModules": [
				"uikit",
				"imask"
			],
			"engines": {
				"browsers": "> 0.5%, last 2 versions, not dead"
			}
		}
	},
	"scripts": {
		"watch": "parcel watch",
		"build": "parcel build --no-source-maps"
	},
	"repository": {
		"type": "git",
		"url": "https://dev.getwhizz.com/Whizz/landing.git"
	},
	"author": "A.Serbovka",
	"license": "ISC",
	"dependencies": {
		"imask": "^6.4.2",
		"uikit": "^3.15.3"
	},
	"devDependencies": {
		"@parcel/transformer-sass": "^2.8.2",
		"parcel": "^2.8.2"
	}
}

После создания файла запускаем команду npm i, если будут ошибки, то  "npm i --legacy-peer-deps" или  "npm i --force". В проекте появится папка node_modules.

Создаем в корне папку scripts и styles, в них разместим наш main.js и main.scss со скриптами и стилями соответственно.

main.js в начале

/* jshint ignore:start */
import '../styles/main.scss'
import UIkit from 'uikit'
import IMask from 'imask'

main.scss в начале

// 1. Your custom variables and variable overwrites.

// 2. Import default variables and available mixins.
@import "../node_modules/uikit/src/scss/variables-theme.scss";

@import "../node_modules/uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.

// 4. Import UIkit.
@import "../node_modules/uikit/src/scss/uikit-theme.scss";

В корне проекта создадим файл .editorconfig и .parcelrc.

.editorconfig

root = true


[*]
charset = utf-8
end_of_line = lf


[*.{php,inc,module}]
indent_style = tab
trim_trailing_whitespace = true
insert_final_newline = true


[*.js]
indent_style = tab
trim_trailing_whitespace = true
insert_final_newline = true


[*.{css,less,scss}]
indent_style = tab
trim_trailing_whitespace = true
insert_final_newline = true

.parcelrc

{
  "extends": "@parcel/config-default"
}

Положим favicon.ico для админки.

assets должны быть в корне папки site, а в assets должны быть: backups, cache, favicon, files, fonts, images, logs, sessions.

Запускаем parsel командой npn run watch, правим все ошибки, которые будут при сборке.

Открываем сайт, правим все ошибки по сайту.

Запускаем parsel командой npm run build, проверяем работоспособность при сборке.

Делаем второй коммит.