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

``bash
$ npm install -D @strt/bricks
`

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

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

Usage

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

$3

Builds the project for development.

$3

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.

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

$3

| 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

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

#### output

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

#### publicPath

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

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

#### styles

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

#### scripts

`javascript
// 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.

`javascript
// 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.

`javascript
// 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.

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

$3

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.

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

$3

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.

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

FAQ

License

MIT © Strateg Marknadsföring