Installation

npm install mbp -g

Usage

# init your project
mbp init

# run the build system you chose
gulp

Modules

Build

| Module | Description | | ------ | ----------- | | modularbp-gulp | Build tasks modules with gulp |

Styles

| Module | Description | | ------ | ----------- | | modularbp-css | CSS modules with cssnext and PostCSS | | modularbp-sass | SCSS modules with Sass | | modularbp-less | LESS modules with Less |

Scripts

| Module | Description | | ------ | ----------- | | modularbp-mjs | JavaScript modules with modularJS and Babel | | modularbp-js | JavaScript modules with Babel |

Views

| Module | Description | | ------ | ----------- | | modularbp-hbs | HTML modules with Handlebars | | modularbp-liquid | HTML modules with Liquid | | modularbp-swig | HTML modules with Swig |

Customization

Base

If you want to further customize the boilerplate to your own structure and files, you can easily clone a GitHub repository with the init command, by specifying the repository name and optionally the destination directory. It will clone first, then install the mbp modules without overwriting your files.

mbp init <user/repo> <dir>

Config

You can create a mconfig.json file to change the default folders structure and set your modules choice to skip the cli questions.

{
  "src": "./src/",
  "dest": "./dist/",
  "build": "./build/",
  "styles": {
    "src": "./src/styles/",
    "dest": "./dist/styles/",
    "main": "main"
  },
  "scripts": {
    "src": "./src/scripts/",
    "dest": "./dist/scripts/",
    "main": "main"
  },
  "svgs": {
    "src": "./src/images/sprite/",
    "dest": "./dist/images/"
  },
  "views": {
    "src": "./src/",
    "partials": "./src/partials/"
  },
  "modules": {
    "build": "gulp",
    "style": "css",
    "script": "mjs",
    "view": "hbs"
  }
}