bifdeprecated

A toolkit for static websites. Not currently maintained, but will be in the future. Check back later or check out Jumpsuit for a great new front-end framework.

Usage no npm install needed!

<script type="module">
  import bif from 'https://cdn.skypack.dev/bif';
</script>

README

Bif

A toolkit for static websites. Not currently maintained, but will be in the future. Check back later or check out Jumpsuit for a great new front-end framework.

Deprecation Notice: The Bif static server is now deprecated in favor of Butler.

Note: If you're migrating from the old Zab CLI, this should be a drop-in replacement. Simply use bif instead of zab in your terminal.

What is Bif?

Bif is a service for building and managing static websites. It includes a powerful watcher/builder system, and a static server for running your projects locally.

Installation

You need Node on your local machine to run Bif. Install it using NVM for OSX/Linux or NVMW for Windows. Then:

npm install -g bif

or to use as middleware

npm install --save bif

Quick Start

bif new myApp
# answer questions
cd myApp && bif watch

That's it! Your site is now running at http://0.0.0.0:8000, and will rebuild when you change a file.

Config

The bif.json config file is automatically created in your project folder when bif new or bif init is run. It can be used to customize your project and server.

  • root [default: dist] Sets the root folder of your compiled site (where your index.html lives).
  • server [default: {}] The configuration for Butler.
  • data [default: data.json] The path to your CMS file, which is used for templates.
  • build
    • path [default: src] The root path to your source files directory. All following paths in build are relative to this path.
    • transforms An array of browserify transforms you want to use in your build. Uses babelify for ES6 support, and envify allowing you to use environment variables. ex. ["vueify", "coffeeify"]
    • processor
      • css [default: stylus] Defines the preprocessor for CSS. Can currently be set to stylus or scss.
    • compile
      • js [default: scripts/app.js] Path to your javascript insertion file.
      • css [default: styles/app.styl] Path to your css insertion file.
      • html [default: views] Path to your views directory.
      • assets [default: assets] Path to your assets directory.
    • watch
      • js [default: ['scripts/**']] An array of glob-patterns to watch for changes to javascript files.
      • css [default: ['styles/**']] An array of glob-patterns to watch for changes to style files.
      • html [default: ['views/**']] An array of glob-patterns to watch for changes to view files.
      • assets [default: ['assets/**']] An array of glob-patterns to watch for changes to asset files.
    • ignore An array of glob-patterns to ignore while watching files. Default values are dotfiles, node_modules, and bower_components. These cannot be overwritten.
    • cdnPrefix [default: none] Will automatically prefix this url to all assets in your HTML and CSS on bif build.
    • cdnex [default: none] A configuration object for Cdnex

Javascript Preprocessing

  • Preprocessed with Babel & JSX. ES6 ftw!
  • Compiled with Browserify

CSS Preprocessing

  • Preprocessed with Stylus or SCSS
  • If you want to use vanilla CSS, put it in your assets folder
  • More preprocessors to come...

HTML Templating

  • Built in support for Jade
  • Any files prefixed with an _ (eg. _layout.jade), will not be compiled
  • Data from data.json will be interpolated into your templates (if you're using Jade)
  • More templating languages to come...

Middleware

You can use Bif as middleware, but implementation of this is still in progress. Better support and documentation is coming soon.

Help & Contributing

If you need additional help with the CLI, you can run bif --help for all the available commands, and bif help [command] for help with a specific command.

To use the cutting-edge version of Bif (from the master branch), you can install with npm install -g zab/bif, or clone this repo and run cd bif && npm install && npm link to link it to your global path.

Bif is still in beta, so if you come across a bug or want to submit an additional feature, please create a new issue. We're also happy to review any pull requests!

Testing

npm test

Not fully tested yet, but this will come soon.

Community

If you plan on using Bif, Zab, or just want to chat about static websites or front-end development, join us on Slack.

Copyright & License

Copyright © 2016 Zab · Licensed under the MIT license.