A zero-configuration toolkit for building modern web apps
npm install @strt/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.
bash
$ npm install -D @strt/bricks
`... then add the scripts to your
json
{
"scripts": {
"dev": "bricks",
"build": "bricks build"
}
}
`Usage
Bricks includes two commands – (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 |
| :-: | :--: | :--: | --- |
| | {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',
}
`####
javascript
// bricks.config.js
module.exports = {
output: 'dist',
}
`####
For more detailed information about the option, visit the Webpack documentation.
`javascript
// bricks.config.js
module.exports = {
publicPath: '/webdav/files/dist/',
}
`####
javascript
// bricks.config.js
module.exports = {
styles: {
path: 'styles',
entries: ['./app.scss'],
}
}
`####
javascript
// bricks.config.js
module.exports = {
scripts: {
path: 'scripts',
entries: {
app: './app.js',
polyfills: './polyfills.js',
},
}
}
`####
Generates a stylesheet from SVG files. It's also possible to copy the icon files to the dist folder by setting the property to true.
`javascript
// bricks.config.js
module.exports = {
icons: {
path: 'icons',
copy: false,
}
}
`####
To extend the usage of , 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;
}
}
`####
To set a 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 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 , 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
Scripts not updating
Make sure that the