Makestatic
Modern, elegant and flexible web site generator powered by webpack (v2) and browsersync for live reload.
It is an opinionated but highly configurable tool for compiling web applications with an optimization preset that will compress all files for production using sensible default values.
By default Javascript is compiled using babel, CSS using postcss (with sugarss) and HTML is generated using reshapeml.
Optimization uses clean-css, html-minifier, uglify-js and imagemin.
Supports automated deployment to amazon s3 and github pages.
Install
npm i -g makestatic
yarn global add makestatic
Quick Start
Get yarn if you need it:
npm i -g yarn
Install the command line interface, yeoman (if you don't already have it) and the project templates:
yarn global add makestatic yo \
generator-makestatic
Then create a new project called webapp:
yo makestatic webapp && cd webapp
Now you can launch the application:
makestatic -w
Happy hacking!
Documentation
See the docs for complete documentation, also available as a standalone markdown document.
Run makestatic -h or man makestatic for more information about the command line interface.
Packages
All packages are namespaced using makestatic, for example yarn add makestatic-auto-title.
archive-zip : Create zip archive of build files
audit-files : Verifies integrity of files on disc
auto-title : Automatic titles for hyperlinks
build-exec : Executes commands during the build phase
build-version : Generate project build versions
clean-output : Removes the output directory
cli : Makestatic command line interface
core : Generic file processing library
core-standard : Standard lifecycle configuration
csp : Generate CSP meta and nonces
csp-sha : Generate CSP meta and sha checksums
css-standard : Standard CSS plugin configuration
deploy-pages : Deploy provider for github pages
deploy-s3 : Deploy provider for amazon s3
deploy-site : Deploys the site to a configured provider
dom-version : Inject version information into HTML pages
emit-gzip : Emits static gzip files
filewrap : File wrapper library
fingerprint : Fingerprints output files
graph-resources : Create a resource graph
html-standard : Standard HTML template plugin configuration
http-cache : Caching HTTP client
inline-css : Transforms external stylesheets to inline styles
inline-data : Convert resource references to data URIs
manifest : Generates a JSON manifest of the output files
optimize-css : Optimize CSS files
optimize-html : Optimize HTML files
optimize-image : Optimize image files
optimize-js : Optimize javascript files
pack-webpack : Bundle assets using webpack
page-id : Utility to generate a page identifier
parse-csp : Parses the csp.txt files to abstract syntax trees
parse-css : Parses CSS files to an abstract syntax tree
parse-html : Parses HTML files to an abstract syntax tree
parse-js : Parses javascript files to an abstract syntax tree
parse-robots : Parses the robots.txt file to an abstract syntax tree
permalink : Convert headings to permalinks
preset-optimize : Optimize lifecycle preset
preset-parse : Parse lifecycle preset
resolve-file : Resolves output file paths
robots : Inject robots meta elements
sitemap : Generates sitemap files
sources-loader : Loads source files from disc
sri : Generate subresource integrity attributes
validate-html : Validates HTML documents
verify-anchor : Verify anchor links exist
verify-id : Verify id attributes are unique
verify-link : Verify external links exist
write-file : Writes output files to disc
Usage
Compile using webpack and the app.js configuration. Reads files from the src directory and writes compiled files to the public directory.
makestaticSet the input and output directories:
makestatic -i app -o htmlWatch files and reload with browsersync:
makestatic -w
Compile using webpack and the app.production.js configuration:
makestatic --env productionWatch files in the production environment:
makestatic -w --env productionWatch files and rebuild for the production environment but disable the browsersync plugin:
makestatic -w --env production --no-syncGenerate static gzip files and a manifest of the output files:
makestatic --env production --manifest --gzipOptimize pre-compiled web application (does not execute the webpack build phase), useful if you have an existing HTML site that needs optimization.
makestatic --env production --no-packSee the command line interface for more information on available options.
Developer
To hack around with the packages install mkdoc globally:
yarn global add mkdoc
Then install dependencies for all packages:
yarn install && mk install
Workflow
To view the available tasks for the repository or a single package run:
mk --tasks
Modify and test a single package:
cd packages/core
# hack ...
mk test
Check the coverage for the package:
mk cover
Then at the root of the repository check tests across all packages:
cd ../..
mk test
To run coverage for all packages and generate an aggregate report run:
mk cover report
If all is well you can bump patch versions, publish and sync dependencies with:
mk bump publish sync
When a new package is created you should run mk meta to update the meta.json descriptor.
Credits
Thanks to all these fine projects: webpack, babel, postcss, sugarss, reshapeml, clean-css, html-minifier, uglify-js, imagemin, browsersync and yeoman.
This project is heavily inspired by and borrows from spike.
License
MIT
Created by mkdoc on March 11, 2017
