Offers you a tailor-made workflow for your Angularjs Web App.
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

[Important] ngTailor has became a Yeoman generator and has moved to https://github.com/lauterry/generator-ngtailor. This repository will not be maintained anymore. Instead, please have a look at generator-ngtailor

ngTailor Built with Grunt

Offers you a tailor-made workflow for your Angularjs Web App.

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

  1. Install node and npm
  2. Install Grunt running npm install -g grunt-cli
  3. Install Bower running npm install -g bower
  4. Install grunt-init running npm install -g grunt-init
  5. 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

  1. Create a new folder for your project
  2. Open a terminal and run grunt-init angular in your project folder
  3. 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.
  1. ngTaylor will generate your Angularjs application and download all the dependencies by running npm install && bower install To check that everything is ok :
  2. Run grunt dev to serve your static assets
  3. Your should see "Yeahhh ! You're ready !" displayed in your browser
  4. 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