node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

@strt/bricks

Bricks

Minimal build tool that just works

Getting started

Add Bricks as a devDependency

$ yarn add --dev @strt/bricks
# or 
$ npm install --dev @strt/bricks

Add Bricks as npm scripts

// package.json
{
  ...
  "scripts": {
    "dev": "bricks",
    "build": "bricks build"
  }
}

Or run directly with npx

$ npx bricks

User guide

Available commands

  • bricks Builds the project for development
  • bricks build Builds the project for production (minifies scripts, optimizes images etc)

Configuration

You can define your options in your package.json or in a bricks.config.js file in the root of your project.

// package.json
{ 
  ...
  "bricks": {
    // Config options here
  }
}
// bricks.config.js
module.exports = {
  // Config options here
}

Browser support

To customize which browsers you want autoprefixer to prefix simple add a browserslist property to your package.json.

{
  ...
  "browserslist": [
    "ie 11",
    "last 2 versions"
  ]
}

Customize babel config

Add a .babelrc to the root of your project. Bricks will find it and merge it with the built-in babel config.

Here is an example of a .babelrc file:

{
  "presets": ["@strt/bricks/babel"],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

Options

Source

Path to the source folder

Example
{
  ...
  source: 'src'
}

Output

Path to the dist folder

Example
{
  ...
  output: 'src'
}

Styles

Styles configuration

Example
{
  ...
  styles: {
    path: 'styles',
    entries: ['./main.scss'],
  }
}

Scipts

Scripts configuration

Example
{
  ...
  styles: {
    path: 'scripts',
    entries: ['./main.js'],
    publicPath: '',
 
  }
}

Serve

All options are sent directly to BrowserSync

Example
{
  ...
  serve: {
    proxy: 'strateg.se',
    serveStatic: [
      {
        route: '/webdav/files/resources',
        dir: 'dist'
      }
    ]
  }
}