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