generator-techtonic v4.2.2

A Yeoman generator for the modern front-end artisan designed to help you craft maintainable code for the web.

Getting Started

✔ Install Yeoman CLI tool, Grunt CLI tool, and generator-techtonic node module globally

npm install --global yo grunt-cli generator-techtonic

✔ Create an empty directory and cd into it

mkdir my-project && cd my-project

✔ Run techtonic generator

yo techtonic

✔ Make some choices

Typical Workflows

After scaffolding a new project with yo techtonic ...

• Serve live-reload enabled app with companion RESTful API using npm start, then...
  • :lipstick: see your style updates and code changes in the browser with a second terminal running grunt styling
  • :sparkles: lint your code in real-time with a second terminal running grunt linting
  • :100: run tests and calculate code coverage in real-time with grunt covering
• Demo your bundled project in a browser with npm run demo
• Run tests with npm test
• View reports, documentation and styleguide:
  • code coverage: grunt cover open:coverage
  • Plato report: grunt plato open:plato
  • JSDocs documentation: grunt docs open:docs
  • Living styleguide: grunt docs open:styleguide
• Review the code to see all the available tasks

View the technologies used and the lint rules that make your code more secure

Command Line Options

Beyond yo techtonic --help

• Scaffold a web app "auto-magically" with defaults and no user input

yo techtonic --defaults

• Use "silent" web app defaults with browserify

yo techtonic --defaults --script-bundler browserify

• Use "silent" web app defaults with custom modifications

yo techtonic --defaults --template-technology underscore --skip-coveralls

Available options

Default in bold

• --defaults: scaffold app with no user input using defaults
• --skip-benchmark: use with --defaults
• --skip-coveralls: use with --defaults
• --skip-jsinspect: use with --defaults
• --skip-aria: use with --defaults
• --skip-imagemin: use with --defaults
• --script-bundler: requirejs | browserify
• --css-preprocessor: less | sass | none
• --template-technology: handlebars | underscore

But wait, there's more! Read about all the available generators!

Why "techtonic"?

techtonic comes from the Ancient Greek noun, tektōn (τέκτων), (term for a carpenter or builder)

Tools, References & Resources

• See wiki page: Front-end Link Library

Future

• See techtonic Trello board

Alternatives

• See wiki page: Tools for Creating Web Apps