Neutered Paranoid Meerkat
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

@strt/bricks

2.3.2 • Public • Published

Bricks npm npm

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

$ 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
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',
    },
  }
}

webpack

To extend the usage of webpack, define a function that extends the config via bricks.config.js.

// bricks.config.js
module.exports = {
  webpack: (config, { isDev }) => {
    // Perform the customizations to the config
    return config;
  }
}

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

Scripts not updating Make sure that the `scripts.publicPath` is set correctly.

License

MIT © Strateg Marknadsföring

install

npm i @strt/bricks

Downloadsweekly downloads

10

version

2.3.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar