You love Angularjs, Grunt, Bower and Yeoman ? 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.
- 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
csslinton 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-installto download your project dependencies and import them in your index.html
- Compile you SASS | LESS files
- Optimize your images (png, jpeg, gif)
- Keep multiple browsers devices in sync using grunt-browser-sync
Both aim to provide you a collection of tools and best practices to improve your productivity as a modern front end developer. Yeoman generator-angular is great but in my opinion, it 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.
- Install node and npm
- Install yeoman running
npm install -g yo
- If you are using npm below 1.2.10, run
npm install -g grunt-cli bowerto install bower and grunt
- Install generator-ngtailor from npm running
npm install -g generator-ngtailor
- Create a new folder for your project
- Open a terminal and run
yo ngtailorin 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.
- ngTailor will generate your Angularjs application and download all the dependencies by running
npm install && bower installTo check that everything is ok :
grunt devto 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 workflow ngtailor offers to you.
grunt devto 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.
csslintwill 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.
grunt packageto package your static assets for production.
- Your package will be generated in a
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
grunt ci: launch
grunt package, run unit tests and e2e test and generate complexity report. Use this task for continuous integration.
npm update -g generator-ngtailor
Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced.