@labelvier/starter-kit-engine NPM

@labelvier/starter-kit-engine

This is the engine that drives the Label Vier starter kit, and a new way to use it. Now it is added as a npm package outside instead of build-into the theme. This makes updating and improving the engine a lot easier.

Requirements

Node v14 or higher (tested on v14 and v18). Check with $ node --version
NPM v7 or higher. Check with $ npm --v. Install with $ npm install --global npm@latest
WordPress
Custom theme (Label Vier starter kit or another custom theme that meets the theme-requirements)

Update existing Label Vier starter kit

Delete package-lock.json from the root of the project AND from the root of the theme.
Delete all node_modules folders.
Replace the contents of package.json in the root of the theme with this code below. (first check if you have some custom packages installed that you use for this theme and add them in the new code)

{
  "name": "labelvier",
  "version": "4.0.0",
  "description": "Label Vier starter kit",
    "scripts": {
    "dev": "l4",
    "build": "l4 build --prod"
  },
  "author": "Label Vier",
  "license": "ISC",
  "devDependencies": {
    "@labelvier/starter-kit-engine": "^1.0.1",
    "glightbox": "^3.1.0",
    "swiper": "^6.8.4"
  }
}

Install npm packages from the root of the project with $ npm install
Run the default command for dev or build and see what happens :)
If the script works well you will get some errors in the sass compile. Now that the sass engine is based on Dart some things need to change in order to work. Luckily with the errors also come the solutions. Just read carefully and fix them. The most common one is the math part where for example (3 / 100%) is used. This needs to be rewritten to math.div(3, 100%) and at the top of the file you need to add @use "sass:math";
And if all works well, delete gulpfile.babel.js and .babelrc from the root of the theme. We don't need these anymore.

Use in a theme not based on the Label Vier starter kit

This engine was mainly built in use with the Label Vier starter kit. It can also be used in other themes, but it has a few requirements in the theme setup. For now it works like this:

Make sure the theme folder structure looks like this: /src/js /src/images /src/scss The engine will compile all these files and move them to the /dist/ folder. All other folders in /scr/ will also be moved (uncompiled) to /dist/
The SASS the starting point will be /src/scss/main.scss (style.css for WordPress styling) and /src/scss/admincss.scss (admincss.css for admin styling).
Running the build script will completely remove the /src/ folder so make sure your in-theme paths will point to the /dist/ folder, and not /src/.
Then we need some extra files and/or code in the right places. You will find some example files in this repository in the WordPress folder.
Place these files here or add the new required code or scripts: /wp-content/themes/themename/package.json package.json .env .gitignore
TODO..