BootFlow | A WordPress Scaffolding Developer Theme

A powerful yet easy to setup WordPress Scaffolding Developer Theme that kickstarts your modern WordPress theme development cycle.

For the frontend folks it has built-in support for SASS, Babel, Webpack, Image Optimizer, BrowserSync and Gulp.

In the theme PHP it has built-in support for Namespaces, Classes Autoloading, even an autoloader for your functions files.

⚙️ Installtion

It requires nodejs with npm and a global installation of gulp 4.x on your development machine.

You can install NodeJs from here.

Once Node is installed on your system, open your terminal and run:

npm install --global gulp gulp-cli

To check your gulp version run:

gulp --version

CLI version: 2.*.*
Local version: 4.*.*

🚀 Let's get you started quickly!

1. Clone this repo
git clone https://github.com/provineet/bootflow

2. cd into directory bootflow

3. Run `npm install` to install all dependencies

4. Edit gulpconfig.js/gulpfile.config.js and place your localhost url in line 10 : proxy: "wpdev.local"

4. Finally, Run `npm run serve` to start a development server

Happy Coding 👍

⚙️ Gulp Configurations

Manage your gulp configration via gulpfile.config.js file inside gulpfile.js folder.

Important Configs

Gulpconfig.json file contains settings and variables used by the gulpfile.js. Below are a few important settings:

Setting	Option Type	Option Value	Usage
MODE	Boolean	true/false	Turn Development mode on and off
COMPRESSION	Boolean	true/false	Enable/Disable assets minification while compilation.
browserSyncOptions.proxy	String	wpdev.local	Your localhost development url.
JSBUILD	String	webpack | concat	Controls how your theme's custom JavaScript files will be compiled.

There are more options that can be tweaked inside gulpconfig.json feel free to check them out.

MODE

Manage the development or production mode of your theme.

{
    MODE: String ("development|production")
}

COMPRESSION

Enable or disable this setting to enable compression for your CSS & JS files.

{
    COMPRESSION: BOOLEAN (true|false)
}

JSBUILD

Controls how your theme's custom JavaScript files will be compiled.

{
    JUSBUILD: String ("concat|webpack")
}

• "webpack" lets you use ES6 modules style building with webpack. You can edit your webpack configuration using gulpfile.js/webpack.config.js file. Create all your custom modules in the modules directory found at assets_src/js/modules and use them in assets_src/js/scripts.bundle.js file. Output file name will be scripts.bundle.min.js.
• With "concat" option all your scripts inside assets_src/js/scripts directory will be concated with the assets_src/js/scripts.js file. Output file name will be scripts.js.

browserSyncOptions

Option to proxy your localhost development URL used by BrowserSync Module.

{
  browserSyncOptions: {
    proxy: "wpdev.local", // your localhost development url goes here.
    notify: false,
  }
}

watchFiles

This option contains the files that are watched by Gulp to refresh your browser on file change event.

{
  watchFiles: {
    php: true,
    scss: true,
    js: true,
    images: true,
    sprites: true,
    assetsCSS: false,
    assetsJs: false,
    assetsImg: false,
  },
}

cssSprites

This option manages how your CSS Sprites will be generated. Place all your Sprite icons inside assets_src/sprite_images and a composite sprite image will be created inside assets_src/images folder and the corresponding SCSS file to use the sprite will be generated inside assets_src/scss/components folder.

{
  cssSprites: {
    retina: false,
    algorithm: "binary-tree",
  },
}

PATHS

This option contains paths used by gulp.

{
  PATHS: {
    root: "/",
    assets: {
      folder: "./assets",
      css: "./assets/css",
      js: "./assets/js",
      fonts: "./assets/webfonts",
      images: "./assets/images",
    },
    src: {
      folder: "./assets_src",
      scss: "./assets_src/scss",
      js: "./assets_src/js",
      images: "./assets_src/images",
      fonts: "./assets_src/webfonts",
      sprites: "./assets_src/sprite_images",
    },
    dist: "./dist", // this folder contains your distributable theme files.
    devdist: "./dev-dist", // this folder contains your distributable theme files for further development.
    node: "./node_modules/",
  },
}

Work with ES6 or Node Modules via Webpack

Write your node module based JS inside Scripts.modules.js file at src/js/scripts.modules.js.

You can create your custom modules inside assets_src/js/modules and they will be watched for changes automatically compiled to scripts.bindle.min.js inside assets/js folder using Webpack.

Edit your webpack configration via webpack.config.js inside gulpfile.js folder.

Work with unbundled/plain JS with Babel Support

Create your script files or functions inside src/js/scripts folder. All the *.js files inside src/js/scripts folder will be concatenated with src/js/scripts.js file, then transpiled using babel and placed inside assets/js/scripts.js.

List of available NPM Commands

NPM Command	Usage
npm run serve	To compile your SCSS, JS, Minify Images and start a development server. Watch for changes in .js, .scss, .php files.
npm run build	Creats a production distributable folder of your theme.
npm run devbuild	Creats a development distributable folder of your theme. Along with yout PHP theme files this version contains all your assets_src and gulpfile.js and other settings files.

List of available Gulp Commands for advanced usage

Gulp Command	Usage
gulp serve	To compile your SCSS, JS, Minify Images and start a development server. Watch for changes in .js, .scss, .php files.
gulp build	Creats a production distributable folder of your theme.
gulp devbuild	Creats a development distributable folder of your theme. Along with yout PHP theme files this version contains all your assets_src and gulpfile.js and other settings files.
gulp minify	Minify all CSS and JS files inside assets folder.
gulp scss	Compiles your scss files to assets/css folder.
gulp scripts	Compiles your JS files to assets/js folder.