Front-end framework for static site prototyping
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
config
source
tasks
test/reference
.editorconfig
.gitattributes
.gitignore
.nvmrc
.travis.yml
.vcmrc
LICENSE.md
README.md
backstop.json
circle.yml
gulpfile.babel.js
package.json
yarn.lock

README.md

framewerk Build Status

Like Kraftwerk, but for front-end development*

*nothing to do with Kraftwerk.

Setup

$ git clone https://github.com/furzeface/framewerk.git
$ cd framewerk
$ npm install # get dependencies

Usage

This project uses nvm and currently runs on Node v7.x.x. Install nvm and once in the project directory run nvm use to utilise the .nvmrc file.

Build

Local

$ npm start
> framewerk@1.0.0 start
> gulp dev # development task runs
  • Creates artefacts in ./build
  • Opens site on local server at http://localhost:3000
  • Starts file watchers for live reloading
  • Starts Browsersync tools at http://localhost:3001

Production

$ npm test
> framewerk@1.0.0 test
> gulp a11y # automated accessibility tests
> gulp --prod # production specific build tasks get ran
  • Outputs production files to ./build
  • Minifies CSS
  • Transpiles JavaScript from ES6
  • Minifies JavaScript

Build task breakdown

./tasks/**

a11y.js

  • Uses gulp-a11y to scan your output **/*.html files and runs them through basic accessibility tests
  • shows a command line report

clean.js

  • Removes artefacts from ./build

copy.js

  • copies icons to build directory
  • copies images to build directory
  • copies manifest file to build directory

docs.js

  • Produces TypeScript documentation using TSDoc with default configuration
  • Produces JavaScript complexity report using Plato

html.js

  • Uses Metalsmith and plugins to build *.html files from ./sources/**/*.hbs Handlebars templating engine
  • Builds ./build/sitemap.xml from your static pages
  • Builds basic ./build/robots.txt
  • Minifies ./build/**/*.html with Gulp HTMLMin

images.js

perf.js

  • Runs automated performance tests via the command line using WebPagetest
  • Runs desktop automated performance tests via the command line using Page Speed Insights
  • Runs mobile automated performance tests via the command line using Page Speed Insights
  • See my blog on the subject for more information

Note: these tasks don’t generally run on a local build - run them as part of your Continuous Integration process, post-deploy

scripts.js

  • Concatenates your scripts
  • Adds in tota11y accessibility toolkit if not production build
  • Transpiles ES6 JavaScript using Babel
  • Minifies code using Uglify if production build
  • Lints JavaScript with ES Lint and config at ./config/eslint.json

server.js

styles.js

  • Transpiles bleeding edge CSS features (custom properties, custom media queries, custom selectors) with Post CSS
  • Vendor prefixed CSS with Autoprefixer
  • Automatic :focus selectors added in with PostCSS Focus
  • Media queries compacted with CSS MQPacker
  • Pixels converted to rem units with PostCSS pxtorem
  • Inserts critical CSS into homepage ./build/index.html with Critical
  • Lints CSS for errors with Stylelint using config at ./config/stylelint.json
  • Minifies CSS with CSS Nano if production build

Workflow

Git-flow

Uses git-flow - ‘nuff said.

Commit message format

Commit messages follow the adopted Angular commmit message guidelines.

Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

The header is mandatory and the scope of the header is optional.

This is used to generate changelogs and to easily grep git command line history.

Git hooks

Pre commit

Husky is used with Commitizen to enforce commit message standards with a pre-commit hook. Read my blog on the subject for more information.

Pre push

Tests are ran with an npm test pre-push hook.

You could override this hook in an emergency with git push --no-verify but this is not recommended.

Testing

Visual regression testing

Visual regression testing is implemented with BackstopJS and configured in ./backstop.json. Read my blog on the subject for more information.

Documentation

As mentioned above ./tasks/docs.js produces TypeScript documentation from code comment blocks according to the TSDoc standard. It also produces JavaScript complexity report on the final JS output with Plato.

These HTML reports are produced in ./build/docs/ so you can host them to display reporting on screens.

Continuous integration

Travis CI and Circle CI config files are in the repository ready for use. Pick one and configure it according to the official documentation:

Read my blog posts on Travis CI basic setup and build optimisation for more information.


framewerk*

* still nothing to do with Kraftwerk.