README
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
- :lipstick: see your style updates and code changes in the browser with a second terminal running
- 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
- code coverage:
- 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
Alternatives
- See wiki page: Tools for Creating Web Apps