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

License

MIT © Strateg Marknadsföring