JavaScript HTML Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
documents
packages
tasks
.gitignore
.jshintrc
.npmignore
.travis.yml
README.md
meta.json
mkdoc.js
package.json
yarn.lock

README.md

Makestatic

Build Status npm version Coverage Status

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

API | Source Code

audit-files : Verifies integrity of files on disc

API | Source Code

auto-title : Automatic titles for hyperlinks

API | Source Code

build-exec : Executes commands during the build phase

API | Source Code

build-version : Generate project build versions

API | Source Code

clean-output : Removes the output directory

API | Source Code

cli : Makestatic command line interface

API | Source Code

core : Generic file processing library

API | Source Code

core-standard : Standard lifecycle configuration

API | Source Code

csp : Generate CSP meta and nonces

API | Source Code

csp-sha : Generate CSP meta and sha checksums

API | Source Code

css-standard : Standard CSS plugin configuration

API | Source Code

deploy-pages : Deploy provider for github pages

API | Source Code

deploy-s3 : Deploy provider for amazon s3

API | Source Code

deploy-site : Deploys the site to a configured provider

API | Source Code

dom-version : Inject version information into HTML pages

API | Source Code

emit-gzip : Emits static gzip files

API | Source Code

filewrap : File wrapper library

API | Source Code

fingerprint : Fingerprints output files

API | Source Code

graph-resources : Create a resource graph

API | Source Code

html-standard : Standard HTML template plugin configuration

API | Source Code

http-cache : Caching HTTP client

API | Source Code

inline-css : Transforms external stylesheets to inline styles

API | Source Code

inline-data : Convert resource references to data URIs

API | Source Code

manifest : Generates a JSON manifest of the output files

API | Source Code

optimize-css : Optimize CSS files

API | Source Code

optimize-html : Optimize HTML files

API | Source Code

optimize-image : Optimize image files

API | Source Code

optimize-js : Optimize javascript files

API | Source Code

pack-webpack : Bundle assets using webpack

API | Source Code

page-id : Utility to generate a page identifier

API | Source Code

parse-csp : Parses the csp.txt files to abstract syntax trees

API | Source Code

parse-css : Parses CSS files to an abstract syntax tree

API | Source Code

parse-html : Parses HTML files to an abstract syntax tree

API | Source Code

parse-js : Parses javascript files to an abstract syntax tree

API | Source Code

parse-robots : Parses the robots.txt file to an abstract syntax tree

API | Source Code

permalink : Convert headings to permalinks

API | Source Code

preset-optimize : Optimize lifecycle preset

API | Source Code

preset-parse : Parse lifecycle preset

API | Source Code

resolve-file : Resolves output file paths

API | Source Code

robots : Inject robots meta elements

API | Source Code

sitemap : Generates sitemap files

API | Source Code

sources-loader : Loads source files from disc

API | Source Code

sri : Generate subresource integrity attributes

API | Source Code

validate-html : Validates HTML documents

API | Source Code

verify-anchor : Verify anchor links exist

API | Source Code

verify-id : Verify id attributes are unique

API | Source Code

verify-link : Verify external links exist

API | Source Code

write-file : Writes output files to disc

API | Source Code

Usage

Compile using webpack and the app.js configuration. Reads files from the src directory and writes compiled files to the public directory.

makestatic

Set the input and output directories:

makestatic -i app -o html

Watch files and reload with browsersync:

makestatic -w

Compile using webpack and the app.production.js configuration:

makestatic --env production

Watch files in the production environment:

makestatic -w --env production

Watch files and rebuild for the production environment but disable the browsersync plugin:

makestatic -w --env production --no-sync

Generate static gzip files and a manifest of the output files:

makestatic --env production --manifest --gzip

Optimize 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-pack

See 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