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.
$ npm install -D @strt/bricks
... then add the scripts to your package.json
{
"scripts": {
"dev": "bricks",
"build": "bricks build"
}
}
Bricks includes two commands – dev
(default) and build
. Neither requires any arguments.
Builds the project for development.
Builds the project for production which minifies and optimizes assets. Sourcemaps are also generated.
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
}
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 |
// bricks.config.js
module.exports = {
source: 'src',
}
// bricks.config.js
module.exports = {
output: 'dist',
}
For more detailed information about the publicPath
option, visit the Webpack documentation.
// bricks.config.js
module.exports = {
publicPath: '/webdav/files/dist/',
}
// bricks.config.js
module.exports = {
styles: {
path: 'styles',
entries: ['./app.scss'],
}
}
// 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 copy
property to true
.
// bricks.config.js
module.exports = {
icons: {
path: 'icons',
copy: false,
}
}
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;
}
}
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'
}
]
}
}
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"
}
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": []
}
Scripts not updating
Make sure that the `scripts.publicPath` is set correctly.MIT © Strateg Marknadsföring