npwb

No Pain Web Builder

A very easy (but quite opinionated) static web bundler.

Install

$ npm install --save-dev npwb

Use

Suppose you have a project structure like this:

$ tree -I node_modules
.
├── package-lock.json
├── package.json
└── src
    ├── index.html
    ├── index.js
    ├── index.scss
    └── logo.svg

index.js contains ES6 code that require() things from node_modules, in fact, this can contains anythings browserify and babelify can compile :)

index.scss contains standard SASS style instructions.

Other useful switches:

• --vuejsx: to compile Vue compatible .jsx file
• --angularjs: to auto annotate AngularJS when minifying
• --less *.less: to compile LESS style instructions

For dev time: build, watch and serve

You want to use this line to build and watch (then re-build on change) without minification:

$ npx npwb --clean --indir src --outdir dist \
    --html *.html \
    --js *.js \
    --sass *.scss \
    --raw *.svg \
    --watch --serve --verbose
[serve] serving: /Users/me/myproject/dist -> localhost:8080
[ html] copied: /Users/me/myproject/src/index.html -> /Users/me/myproject/dist/index.html
[  raw] copied: /Users/me/myproject/src/logo.svg -> /Users/me/myproject/dist/logo.svg
[ sass] rendered: /Users/me/myproject/src/index.scss -> /Users/me/myproject/dist/index.css
[   js] compiled: /Users/me/myproject/src/index.js -> /Users/me/myproject/dist/index.js

Build for production

You want to use this line to build only, with minification, ready for production:

$ npx npwb --clean --indir src --outdir dist \
    --html *.html \
    --js *.js \
    --sass *.scss \
    --raw *.svg \
    --minify

This will produce:

$ tree dist
dist
├── index.css
├── index.html
├── index.js
└── logo.svg