Yeoman provides scaffolding.
Bower manages dependencies.
Grunt manages build tasks.
- copy - allows grunt to copy generated files
- uglify - minify js files
- compass - compile sass
- jshint - error check js files
- watch - watch for file changes to kick off tasks
- open - allows Grunt to open files
- connect - development web server
- concurrent - run grunt tasks concurrently
- clean - removes previously generated files
- env - provides environment variables
- preprocess - preprocesses files allowing for integration with environment variables
Several frameworks are available right from Yeoman. Adding a framework from Yeomon will download the files and add references to them in the appropriate places.
- JQuery
$ yo dp:jquery - Bootstrap
$ yo dp:bootstrap - Foundation
$ yo dp:foundation
Pretty much any other framework can be installed via Bower.
- Find a package to install via command line
$ bower search [<name>]or from here. - Install the package.
$ bower install <package_name> - The contents of the package will be in
app/libs. Include the required files in the appropriate location(s).
- Install nodejs.
- Install Grunt.
$ npm install -g grunt-cli - Install Bower.
$ npm install -g bower - Windows Only Install ruby.
- Install Compass, which will install SASS.
$ gem update --system && gem install compass
-
Clone repo.
-
Download dependencies.
$ npm install
$ bower install
Grunt Options:
Lint all of the JavaScript files.
$ grunt lint
Just build distribution files:
$ grunt build
Run the grunt server. As you change files the page will automatically refresh.
$ grunt server
The env and preprocess grunt plugins allow the use of basic logic statements to alter the final produced HTML/JavaScript/CSS code. The act in similar ways to global variables for conditional compilation in ActionScript.
By default the application is configured with development and production environments. The development environment is used with the grunt server command. The production environment is used with the grunt build command.
The process module allows for various types of logical statements. The most common will be to conditionally include/exclude code and to echo environment variables.
Only include code in a production build (HTML):
<!-- @if NODE_ENV='production' -->
<link rel="stylesheet" href="dist/styles/app.min.css">
<!-- @endif -->
Only include code if the DEBUG environment variable is true (HTML):
<!-- @ifdef DEBUG -->
<h1>Debugging mode - <!-- @echo RELEASE_TAG --> </h1>
<!-- @endif -->
Write the values of two environment variables into the code (JavaScript):
console.log("Environment: " + '/* @echo NODE_ENV */' + " | Version: " + '/* @echo VERSION */');
Set the background color of the application based on environment (CSS):
body {
/* @if NODE_ENV=='development' */
background-color: red;
/* @endif */
}
All of the available directives are:
@if VAR='value' / @endif- This will include the enclosed block if your test passes@ifdef VAR / @endif- This will include the enclosed block if VAR is defined (typeof !== 'undefined')@ifndef VAR / @endif- This will include the enclosed block if VAR is not defined (typeof === 'undefined')@include- This will include the source from an external file. If the included source ends with a newline then the following line will be space indented to the level the @include was found.@exclude / @endexclude- This will remove the enclosed block upon processing@echo VAR- This will include the environment variable VAR into your source
$ yo dp
This is give you a skeleton project containing...
- An index.html file which defines an ng-app on the html tag.
- Angular, Angular Resource, and JS Signals are included by default.
- A controller attached to the body tag.
- The application modules will include service, directive, and filter modules.
- A SASS file is generated at styles/main.scss.
- A Grunt task to jslint files.
- A Grunt task to minify JavaScript and CSS files.
- A Grunt task to launch a web server that will automatically refresh as you modify code.
- Controller
$ yo dp:controller Name
[?] Which dependencies would you like to include? (space separated list, blank for none)
This will generate a controller with the given name (NameController). Dependencies are optional. If provided they will automatically be included in the controller declaration.
- JSON Service
$ yo dp:json-service Name url
This will generate a service with the given name, which can be referenced by the name as a dependency. The service will fetch URL and return the contents.
Usage:
$ yo dp:json-service Items data/items.json
app.controller('TestController', function($scope, Items) {
Items.query(function (data) {
$scope.streams = data.items;
});
}
- HTTP Service
$ yo dp:http-service Name url type
[?] Which dependencies would you like to include? (space separated list, blank for none)
[?] Which properties would you like to include? (space separated list, blank for none)
This will generate a service with the given name, which can be referenced by the name as a dependency. The service will invoke the given URL using the provided type (get/post/etc) method.
type is optional and will default to "get".
If provided, the provided dependencies and properties will be automatically included.
- Data Service
$ yo dp:model-service Name
This will create a service that operates as a data model. The model will have the methods get and set. A changed signal will be available as a property of the model.
- State Router
$ yo dp:state-router
[?] What is the route's name? One
[?] What is the route's url? /one
[?] What is the route's templateUrl? /one.t.html
[?] Make another route? Yes
[?] What is the route's name? Two
[?] What is the route's url? /two
[?] What is the route's templateUrl? /two.t.html
[?] Make another route? No
[?] What is the default route url? /one
This will create a state router with the given parameters. For details on how to use the state router, see here.