node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

mbob

mbob

Fast, minimal build system with parallel processes and live-reload server

Local install

Install mbob as local dev dependency.

npm install mbob --save-dev

Provide npm scripts in package.json.

"scripts"{
  "build": "mbob build",
  "dev": "mbob",
  "test": "mbob test"
}

Create an .mbob file (see below).

Global install

Another way is to install it as a global utility.

npm install mbob -g

New project

Run mbob new with a project name.

mbob new app

Starter files include:

  • .gitignore
  • .mbob
  • package.json
  • src folder with empty index.js, scss, html

The only requirement is .mbob in the current working directory.

Dev dependencies

Install commands to be used by build tasks, such as babel and node-sass.

cd app
npm install

Use

Develop

Start a static file server that will watch files, build and reload on change.

mbob

Build

For production, build minified bundles with no sourcemap.

mbob build

There's a shortcut: mbob b

Configure

.mbob is a configuration file written in Human JSON.

Here is an example .mbob with comments.

# (optional) Define variables: $name, $src, $dest
 
name: app
src: src
dest: build
 
# (optional) Command to run before build
 
before: mkdir -p $dest
 
# Build tasks to run in parallel
 
build: {
 
  css: {
 
    # Build and dev commands are run from local node_modules/.bin
    # if they're defined as dependencies in package.json
 
    # Build command: minified, no sourcemap
 
    build: node-sass --output-style compressed $in $out
 
    # (optional) dev command: compile with sourcemap
 
    dev: node-sass --source-map-contents --source-map-embed $in -w $out
 
    # (optional) Entry for bundle(s)
 
    entry: {
 
      # (optional) Define variables to pass to build/dev command
 
      in: $src/index.scss
      out: $dest/$name.css
 
      # css entry doesn't need to watch files, because node-sass -w
 
      # watch: $src/**/*.scss
    }
 
    # For multiple bundles, give entry as array: [{ in,out }, { in,out }, ...]
    # build/dev command will be run for each entry
 
  }
 
  html: {
 
    build: html-transform $in $out
 
    # If there is no dev command, the build command will be run on file change
 
    entry: {
      in: $src/index.html
      out: $dest/index.html      
 
      # (optional) Watch files, build and reload on change
 
      watch: $src/*.html
    }
  }
 
  js: {
 
    build: browserify -p [ minifyify --compressPath . --no-map ] -t babelify $in -o $out
 
    dev: watchify -v -d -t babelify $in -o $out
 
    entry: {
 
      in: $src/index.js
      out: $dest/$name.js
 
      # js entry doesn't need to watch files, because watchify
 
      # watch: $src/**/*.js
    }
  }
}
 
# Static file server
 
serve: {
 
  # Serve from this directory
 
  from: $dest
 
  # Serve at localhost port
 
  port: 3000
 
  # Reload when js bundle is compiled
 
  reload: [
    $dest/*.js
  ]
 
  # Reload CSS when css bundle is compiled
  # This will apply new styles without reloading the browser
 
  reloadCSS: [
    $dest/*.css  
  ]
}