Gulp + Webpack Recipes

Installation

Install dependencies into your project with NPM.

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 URL constant in your .env file, like this:

URL=http://example.local

Working with HTML

You can add HTML_SRC 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 html

gulp html

Working with Twig

You can add TWIG_SRC 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/

Variables in Twig

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:

  <h1>{{ title }}</h1>
  <p>{{ content.first }}</p>

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 SASS_SRC 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 sass

gulp sass

Working with JavaScript

You can add JS_SRC 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 scripts

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 .env 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 DEST folder

Build

When the project is ready to go, You can run the npm script

npm run build

This will generate production files into DEST folder

Roadmap

Assets

Scripts

• [x] ~~JavaScript ES6+ compilation with Babel~~
• [x] ~~JavaScript concatenation & minification~~
• [x] ~~JavaScript bundler with Webpack~~

Styles

• [x] ~~Sass compilation~~
• [x] ~~CSS concatenation & minification~~
• [x] ~~Livereload browser during development~~
• [ ] RTL support (https://www.npmjs.com/package/gulp-rtlcss)
• [ ] Generate unminified stylesheet (https://www.npmjs.com/package/gulp-cssbeautify)
• [ ] LESS compilation (https://www.npmjs.com/package/gulp-less)

Template

• [x] ~~HTML minification~~

Fonts

• [x] ~~Generate missing extension~~

Images

• [x] ~~Optimize images~~
• [ ] Create SVG sprites (https://www.npmjs.com/package/gulp-svgstore)
• [ ] Convert images to WebP (https://www.npmjs.com/package/gulp-webp)

Workflow

• [x] ~~Livereload browser during development~~
• [x] ~~Clean destination folder on build~~
• [x] ~~Check accessibility~~
• [ ] Zip builded files
• [ ] Create release
• [ ] Changelog based on commits
• [ ] Zip builded files

Framework

• [ ] WordPress Installation with WP CLI
• [ ] Generate POT file (https://www.npmjs.com/package/gulp-wp-pot)
• [ ] Deploy WordPress with WP CLI