Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/strt/bricks
📦 A zero-configuration toolkit for building modern web apps
https://github.com/strt/bricks
build-tool toolkit zero-configuration
Last synced: 3 months ago
JSON representation
📦 A zero-configuration toolkit for building modern web apps
- Host: GitHub
- URL: https://github.com/strt/bricks
- Owner: strt
- License: mit
- Created: 2017-06-19T06:33:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T19:54:45.000Z (3 months ago)
- Last Synced: 2024-10-28T20:40:55.054Z (3 months ago)
- Topics: build-tool, toolkit, zero-configuration
- Language: JavaScript
- Homepage:
- Size: 365 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# Bricks [](https://www.npmjs.com/package/@strt/bricks) [](https://www.npmjs.com/package/@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.
## Contents
- [Install](#install)
- [Usage](#usage)
- [Configuration](#configuration)
- [Options](#options)
- [Browsers](#browsers)
- [Babel](#babel)
- [FAQ](#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.
### `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.
```javascript
// 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](https://webpack.js.org/configuration/output/#output-publicpath).|
| `browserSync` | `{Object}` | [Default](https://github.com/strt/bricks/blob/next/config/config.js#L39-L46) | Options to pass to [BrowserSync](https://www.browsersync.io/docs/options) |
| `files` | `{Function}` | [Default](https://github.com/strt/bricks/blob/next/config/config.js#L30-L36) | 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](https://webpack.js.org/configuration/output/#output-publicpath).
```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](https://www.browsersync.io/docs/options) for more detailed information.
```javascript
// 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](https://github.com/ai/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"
}
```
### 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.
```json
{
"presets": ["@strt/bricks/babel"],
"plugins": []
}
```
## FAQ
Scripts not updating
Make sure that the `scripts.publicPath` is set correctly.
## License
MIT © [Strateg Marknadsföring](https://github.com/strt)