https://github.com/johnpapa/generator-hottowel
Yo generator that creates an Angular app via HotTowel
https://github.com/johnpapa/generator-hottowel
Last synced: 6 months ago
JSON representation
Yo generator that creates an Angular app via HotTowel
- Host: GitHub
- URL: https://github.com/johnpapa/generator-hottowel
- Owner: johnpapa
- Created: 2014-11-22T22:38:31.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-08-03T00:17:44.000Z (about 8 years ago)
- Last Synced: 2025-04-01T10:12:04.717Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 349 KB
- Stars: 834
- Watchers: 62
- Forks: 229
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# generator-hottowel
[](https://www.npmjs.com/package/generator-hottowel)
[](https://travis-ci.org/johnpapa/generator-hottowel)
Create an Angular application using the HotTowel style (via a [Yeoman](http://yeoman.io) generator)
>*Opinionated Angular style guide for teams by [@john_papa](//twitter.com/john_papa)*
>More details about the styles and patterns used in this app can be found in my [Angular Style Guide](https://github.com/johnpapa/angularjs-styleguide) and my [Angular Patterns: Clean Code](http://jpapa.me/ngclean) course at [Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) and working in teams.
## Prerequisites
1. Install [Node.js](http://nodejs.org)
- on OSX use [homebrew](http://brew.sh) `brew install node`
- on Windows use [chocolatey](https://chocolatey.org/) `choco install nodejs`
1. Install these npm packages globally
```bash
npm install -g yo bower gulp nodemon
```
>Refer to these [instructions on how to not require sudo](https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md)
## QuickStart
1. Install generator-hottowel
```bash
npm install -g generator-hottowel
```
1. Create a new folder and change directory to it
```bash
mkdir myapp
cd myapp
```
1. Run the generator
```bash
yo hottowel helloWorld
```
## HotTowel Options
### Application Name
- Pass in the app's name to avoid being prompted for it
```bash
yo hottowel [appName]
```
## Running HotTowel
### Linting
- Run code analysis using `gulp vet`. This runs jshint, jscs, and plato.
### Tests
- Run the unit tests using `gulp test` (via karma, mocha, sinon).
### Running in dev mode
- Run the project with `gulp serve-dev`
- opens it in a browser and updates the browser with any files changes.
### Building the project
- Build the optimized project using `gulp build`
- This create the optimized code for the project and puts it in the build folder
### Running the optimized code
- Run the optimize project from the build folder with `gulp serve-build`
## Exploring HotTowel
HotTowel Angular starter project
### Structure
The structure also contains a gulpfile.js and a server folder. The server is there just so we can serve the app using node. Feel free to use any server you wish.
```files
/src
/client
/app
/content
```
### Installing Packages
When you generate the project it should run these commands, but if you notice missing packages, run these again:
- `npm install`
- `bower install`
### The Modules
The app has 4 feature modules and depends on a series of external modules and custom but cross-app modules
```
app --> [
app.admin --> [
app.core,
app.widgets
],
app.dashboard --> [
app.core,
app.widgets
],
app.layout --> [
app.core
],
app.widgets,
app.core --> [
ngAnimate,
ngSanitize,
ui.router,
blocks.exception,
blocks.logger,
blocks.router
]
]
```
#### core Module
Core modules are ones that are shared throughout the entire application and may be customized for the specific application. Example might be common data services.
This is an aggregator of modules that the application will need. The `core` module takes the blocks, common, and Angular sub-modules as dependencies.
#### blocks Modules
Block modules are reusable blocks of code that can be used across projects simply by including them as dependencies.
##### blocks.logger Module
The `blocks.logger` module handles logging across the Angular app.
##### blocks.exception Module
The `blocks.exception` module handles exceptions across the Angular app.
It depends on the `blocks.logger` module, because the implementation logs the exceptions.
##### blocks.router Module
The `blocks.router` module contains a routing helper module that assists in adding routes to the $routeProvider.
## Gulp Tasks
### Task Listing
- `gulp help`
Displays all of the available gulp tasks.
### Code Analysis
- `gulp vet`
Performs static code analysis on all javascript files. Runs jshint and jscs.
- `gulp vet --verbose`
Displays all files affected and extended information about the code analysis.
- `gulp plato`
Performs code analysis using plato on all javascript files. Plato generates a report in the reports folder.
### Testing
- `gulp serve-specs`
Serves and browses to the spec runner html page and runs the unit tests in it. Injects any changes on the fly and re runs the tests. Quick and easy view of tests as an alternative to terminal via `gulp test`.
- `gulp test`
Runs all unit tests using karma runner, mocha, chai and sinon with phantomjs. Depends on vet task, for code analysis.
- `gulp test --startServers`
Runs all unit tests and midway tests. Cranks up a second node process to run a server for the midway tests to hit a web api.
- `gulp autotest`
Runs a watch to run all unit tests.
- `gulp autotest --startServers`
Runs a watch to run all unit tests and midway tests. Cranks up a second node process to run a server for the midway tests to hit a web api.
### Cleaning Up
- `gulp clean`
Remove all files from the build and temp folders
- `gulp clean-images`
Remove all images from the build folder
- `gulp clean-code`
Remove all javascript and html from the build folder
- `gulp clean-fonts`
Remove all fonts from the build folder
- `gulp clean-styles`
Remove all styles from the build folder
### Fonts and Images
- `gulp fonts`
Copy all fonts from source to the build folder
- `gulp images`
Copy all images from source to the build folder
### Styles
- `gulp styles`
Compile less files to CSS, add vendor prefixes, and copy to the build folder
### Bower Files
- `gulp wiredep`
Looks up all bower components' main files and JavaScript source code, then adds them to the `index.html`.
The `.bowerrc` file also runs this as a postinstall task whenever `bower install` is run.
### Angular HTML Templates
- `gulp templatecache`
Create an Angular module that adds all HTML templates to Angular's $templateCache. This pre-fetches all HTML templates saving XHR calls for the HTML.
- `gulp templatecache --verbose`
Displays all files affected by the task.
### Serving Development Code
- `gulp serve-dev`
Serves the development code and launches it in a browser. The goal of building for development is to do it as fast as possible, to keep development moving efficiently. This task serves all code from the source folders and compiles less to css in a temp folder.
- `gulp serve-dev --nosync`
Serves the development code without launching the browser.
- `gulp serve-dev --debug`
Launch debugger with node-inspector.
- `gulp serve-dev --debug-brk`
Launch debugger and break on 1st line with node-inspector.
### Building Production Code
- `gulp html`
Optimize all javascript and styles, move to a build folder, and inject them into the new index.html
- `gulp build`
Copies all fonts, copies images and runs `gulp html` to build the production code to the build folder.
### Serving Production Code
- `gulp serve-build`
Serve the optimized code from the build folder and launch it in a browser.
- `gulp serve-build --nosync`
Serve the optimized code from the build folder and manually launch the browser.
- `gulp serve-build --debug`
Launch debugger with node-inspector.
- `gulp serve-build --debug-brk`
Launch debugger and break on 1st line with node-inspector.
### Bumping Versions
- `gulp bump`
Bump the minor version using semver.
--type=patch // default
--type=minor
--type=major
--type=pre
--ver=1.2.3 // specific version
## License
MIT