Small browser dists by using all of the latest technologies
External source maps for all js and css files
Automatic licence/banner insertion at the top of minified files
support for linting js, css, documentation, and documenation examples (js only)
super fast incremental rebuilds --watch
JavaScript
es6 -> es5 for publishing on npm
Ability to support IE8 (or not) effortlessly (NOTE: this will add a lot of bytes to your dist)
Support for es6 -> es6 imports using jsnext:main pointing to es6 entry files in package.json
Support for shimming video.js so that it will be included in the page for testing but not included in the dist file
Automatic unit test generation for webpack and browserify
CSS
support for vanilla css with concatination via postcss-import (like require for css)
support for sass
Docs
API documenation generated into html files from jsdoc comments
Manual documenation generated into html files
Automatic table of contents for manual documenation
Test
QUnitjs supported out of the box
sinon supported out of the box (local installation not necessary or recommended)
Manual debuging via karma debug page and --watch
Server
--tunnel option to share your local dev server over the internet
sb-start to:
start a dev server
build everything and re-build on change
lint everything and re-lint on change
test everything and re-build tests on change
auto-reload when files change in
<project-root>/dist/**/*.js
<project-root>/dist/**/*.css
<project-root>/dist/**/*.html
<project-root>/examples/**/*.html
<project-root>/index.html
Proxy karma to http://localhost:9999/test so:
manual debugging is easier
it can be included in a tunnel over the internet
auto-reloads will happen when code changes
browser-sync which will:
reload on file change
offers a ui for configuration at http://localhost:10000
can be used to turn off auto reload etc.
Release mangagement
Support for use as an npm script or standalone
Does the following:
Release un-released changelog entries with chg
update the version in package.json
support/build dists for bower in the tag so they don't clutter the main repo
make a git commit with the version name as the message
tag a git branch
Advise the user on how to push to git, and publish to npm
Installation
Run npm install --save-dev videojs-spellbook
Read the sb man page to lean about how your project should be structured.
Things to know
jsnext:main must point to your es6 main file in each project that you want to bundle together (this will make
the dist files much smaller).
global/sinon are included in spellbook and will be used for your project if your project does not have/need
local versions. If you need the for browser dists though, you will have to install them
Known issues & Workarounds
rollup is not used during watch (rollupify and watchify don't play nice)
this is not really something that can be worked around yet but it should
not be an issue as rollup will be used during build and watch should only
be used in development
es6 code changes in sub projects don't trigger a rebuild on watch
This is due to rollupify not working with watchify, see the above issue. Have spellbook or your
current build system watch your sub-project and rebuild its es5 dist on change.