ngTailor by lauterry

Why is ngTailor interesting ?

You love Angularjs, Grunt and Bower ? You might be interested by ngTailor. ngTailor scaffolds out a new Angularjs application, writing your Grunt and Bower configurations and prepare for you revelant Grunt tasks you needs.

Features

Let you choose the Angularjs modules you need.
Your assets dependencies are managed by bower
Run Brian Ford ng-min before your minification
Replace your scripts and stylesheets declaration with the minified version when packaging your app for production thanks to http://yeoman.io/ grunt-usemin
Watch for you assets changes and automatically run jshint or csslint on your code and even unit tests.
Livereload is out of the box. No F5 anymore
Automatically output a hash in your assets file name for caching purpose.
Set up unit and e2e tests with Karma and Jasmine and generate test coverage report.
Automatically run npm install && bower install && grunt bower-install to download your project dependencies and import them in your index.html
Compile you SASS | LESS files
Visualize Javascript source complexity with plato. (See an example of a plato report)
Optimize your images (png, jpeg, gif)
Keep multiple browsers devices in sync using grunt-browser-sync

ngTailor vs Yeoman ?

Both aim to provide you a collection of tools and best practices to improve your productivity as a modern front end developer. Yeoman is great but in my opinion, its generator-angular provides a bloated solution to manage and build angularjs applications. ngTailor let you choose in a much more fine-grained way, each tools or components you want to be included in your application and workflow. Note that ngTailor do not provide generator for directives, controllers etc like yeoman and generator-angular do.

Prerequisites

Install node and npm
Install Grunt running npm install -g grunt-cli
Install Bower running npm install -g bower
Install grunt-init running npm install -g grunt-init
Install this template in your ~/.grunt-init/ directory (%USERPROFILE%\.grunt-init\ on Windows) by running git clone https://github.com/lauterry/ngTailor.git ~/.grunt-init/angular

Generate your Angular project

Create a new folder for your project
Open a terminal and run grunt-init angular in your project folder
Choose between "Fast mode" or "Advanced mode":
- "Fast mode" : Generate an Angularjs project with the minimal options.
- "Advanced mode" : Let you customize your scaffolding and add more features. Just answer to the prompted questions.
ngTaylor will generate your Angularjs application and download all the dependencies by running npm install && bower install To check that everything is ok :
Run grunt dev to serve your static assets
Your should see "Yeahhh ! You're ready !" displayed in your browser
Voilà ! Your Angular project is ready ! Next step is to discover the available Grunt tasks.

Developement

Run grunt dev to start a static web server and open your browser.
Livereload will be automatically active meaning that you can see your modification on the browser without hitting F5.
jshint and/or csslint will be run on your files when they change.
If you choose to have unit tests, they will be run as your test and source files change.

Package for Production

Run grunt package to package your static assets for production.
Your package will be generated in a dist folder and your javascripts and stylesheets will be concatenated, minified and versionned.
grunt : launch grunt package, run unit tests and e2e test and generate complexity report. Use this task for continuous integration.

Available Grunt tasks

grunt ls : list and describe the available grunt tasks of your project.
grunt test:unit : run karma unit tests and show test coverage in console.
grunt test:e2e : run karma e2e tests
grunt report : open complexity report in your browser

Update ngTailor

rm -rf ~/.grunt-init/angular
git clone https://github.com/lauterry/ngTailor.git ~/.grunt-init/angular