Bricks

A zero-configuration toolkit for building modern web apps

Bricks is a dev-toolkit for developing modern web apps without the need of configuring Webpack, Babel, gulp etc. It comes with sane defaults but also allows for customization.

Contents

• Install
• Usage
• Configuration
  • Options
  • Browsers
  • Babel
• FAQ

Install

$ npm install -D @strt/bricks

... then add the scripts to your package.json

{
  "scripts": {
    "dev": "bricks",
    "build": "bricks build"
  }
}

Usage

Bricks includes two commands – dev (default) and build. Neither requires any arguments.

bricks / bricks dev

Builds the project for development.

bricks build

Builds the project for production which minifies and optimizes assets. Sourcemaps are also generated.

Configuration

For custom advanced behavior of Bricks, create a bricks.config.js file in the root of your project directory.

// bricks.config.js
module.exports = {
  // Your custom configuration
}

Options

Name	Type	Default	Description
source	{String}	'src'	Path to source directory
output	{String}	'dist'	Path to output directory
publicPath	{String}	null	Value to pass to Webpack.
browserSync	{Object}	Default	Options to pass to BrowserSync
files	{Function}	Default	Function to define which files are static
styles.path	{String}	styles	Path to styles directory
styles.entries	{Array}	[]
styles.plugins	{Array}	[]	PostCSS plugins
scripts.path	{String}	scripts	Path to scripts directory
scripts.entries	{Object}	``
icons.path	{String}	icons	Path to icons directory
icons.copy	{Boolean}	false	Copy icon files to dist folder
webpack	{Function}	null	Function to extend the use of webpack

source

// bricks.config.js
module.exports = {
  source: 'src',
}

output

// bricks.config.js
module.exports = {
  output: 'dist',
}

publicPath

For more detailed information about the publicPath option, visit the Webpack documentation.

// bricks.config.js
module.exports = {
  publicPath: '/webdav/files/dist/',
}

styles

// bricks.config.js
module.exports = {
  styles: {
    path: 'styles',
    entries: ['./app.scss'],
  }
}

scripts

// bricks.config.js
module.exports = {
  scripts: {
    path: 'scripts',
    entries: {
      app: './app.js',
      polyfills: './polyfills.js',
    },
  }
}

icons

Generates a stylesheet from SVG files. It's also possible to copy the icon files to the dist folder by setting the copy property to true.

// bricks.config.js
module.exports = {
  icons: {
    path: 'icons',
    copy: false,
  }
}

webpack

To extend the usage of webpack, define a function that extends the config via bricks.config.js.

// bricks.config.js
module.exports = {
  webpack: ({ webpackConfig, config, isDev }) => {
    // Perform the customizations to the config
    return webpackConfig;
  }
}

browserSync

To set a BrowserSync configuration, add a browserSync property to the bricks.config.js. Visit the BrowserSync documentation for more detailed information.

// bricks.config.js
module.exports = {
  browserSync: {
    proxy: 'strateg.se',
    serveStatic: [
      {
        route: '/webdav/files/resources',
        dir: 'dist'
      }
    ]
  }
}

Browsers

To customize which browsers you want to target, add a browserslist property to your package.json and define the browsers you want. This affects both autoprefixer and babel.

{
  "browserslist": "last 2 versions, ie 11"
}

Babel

To extend the usage of babel, create a .babelrc in the root of your project directory. This file will overwrite the default babel config. You need to add the @strt/bricks/babel preset if you only want to extend the default config.

{
  "presets": ["@strt/bricks/babel"],
  "plugins": []
}

FAQ

Scripts not updating

Make sure that the `scripts.publicPath` is set correctly.

License

MIT © Strateg Marknadsföring