Build modern web with Sass, ESNext & WordPress workflow.
npm i -D @fantassin/bzk
In your package.json you need to add 2 scripts.
"start": "bzk start",
"build": "bzk build"
Once it's done, let's run in your project folder npx bzk init`This will ask you some questions about your project. WordPress part isn't finished yet.
You now have default files at the root of your project that is important (
.eslint, .env, .babelrc, ...`), you change change them. But the most important is to create your own .env.ENV
You need to construct the skeleton of you architecture as you want it to be.Configure your environment with
.env file you'll create at the root of the project. You have an example of the configuration with example.env file.You need at least 2 constants
SRC and DEST that specify which folders do you want to work with.SRC is your working folder, all your development files are located here like JavaScript, Sass, Less, HTML or PHP files.DEST is your build folder, all compiled files will be located here.
`
SRC=./src
DEST=./public
By default it serves current directory, if you want to use proxy, you can add
constant in your .env file, like this:
`
URL=http://example.local
Working with HTML
You can add and HTML_DEST constants in your .env file, to specify custom directories for your HTML files, like this:
`
HTML_SRC=./src/html/*/.html
HTML_DEST=./public/html/
And run gulp task named
gulp html
Working with Twig
You can add and TWIG_DEST constants in your .env file, to specify custom directories in order to compile your Twig files:
`
TWIG_SRC=./src/twig/*/.twig
TWIG_DEST=./public/
$3
In case you use variables in Twig file, you need to create a JSON file in the __same directory__ with filename suffixed by .json`E.g. let's use variables in
header.twig`:
`
{{ title }}
{{ content.first }}
The data has to be located in
header.twig.json`
{
"title" : "Title of my website",
"content": {
"first": "Content of my website",
}
}
`Working with Sass
You can add and SASS_DEST constants in your .env file, to specify custom directories for your Sass files, like this:
`
SASS_SRC=./src/styles/*/.scss
SASS_DEST=./public/styles/
And run gulp task named
gulp sass
Working with JavaScript
You can add and JS_DEST constants in your .env file, to specify custom directories for your JavaScript files, like this:
`
JS_SRC=./src/scripts/*/.js
JS_DEST=./public/scripts/
And run gulp task named
gulp scripts
And more
You can set a folder for images, vendors (assets that you don't need to be build), fonts... You can change folder variables in the file. When everything is set you can start developing by launching the gulp task named scripts or build if you want to build.Development
When the project environment is ready to go, You can run the npm script`
npm run start
This will generate development files into
folderBuild
When the project is ready to go, You can run the npm script`
npm run build
This will generate production files into