generator-gulp-angularfire 

Offers you a Yeoman generator to initiate a Web application with the following workflow:

Why generator-gulp-angularfire ?

This generator combines the best features of other generators like generator-gulp-angular, generator-angular, ngTailor and generator-gulp-webapp into an optimal workflow for starting applications with AngularJS powered by Gulp & Firebase!

generator-gulp-angularfire scaffolds an Angularfire application with a full-featured gulpfile.js, giving you immediate out-of-the-box access to all tasks for modern web development with Firebase.

My intention is to create a generator that gives users total control over their development toolbox so they can immediately start projects with their preferred tools, such as specific UI frameworks or JavaScript preprocessors.

Usage

$3

Install the required tools: yo, gulp, bower
``
npm install -g yo gulp bower
`

Install generator-gulp-angularfire:
`
npm install -g generator-gulp-angularfire
`

Make a new directory, and cd into it:
`
mkdir my-new-project && cd $_
`

Run yo gulp-angularfire, optionally passing an app name:
`
yo gulp-angularfire [app-name]
`

$3

* gulp or gulp build to build an optimized version of your application in /dist
* gulp serve to launch a browser sync server on your source files
* gulp serve:dist to launch a server on your optimized application
* gulp wiredep to fill bower dependencies in your .html file(s)
* gulp test to launch your unit tests with Karma
* gulp protractor to launch your e2e tests with Protractor
* gulp protractor:dist` to launch your e2e tests with Protractor on the dist files

Directory structure

Best Practice Recommendations for Angular App Structure

But I recommend keeping to a division by file type: scripts, styles, partials.

Features included in the gulpfile

useref* : allow configuration of your files in comments of your HTML file
ngMin* : convert simple injection to complete syntax to be minification proof
uglify* : optimize all your JavaScript
csso* : optimize all your CSS
rev* : add a hash in the file names to prevent browser cache problems
watch* : watch your source files and recompile them automatically
jshint* : JavaScript code linter
imagemin* : all your images will be optimized at build
Unit test (karma)* : out of the box unit test configuration with karma
e2e test (protractor)* : out of the box e2e test configuration with protractor
browser sync* : full-featured development web server with livereload and devices sync
ngHtml2js* : all HTML partials will be converted to JS to be bundled in the application
* TODO lazy : don't process files which haven't changed when possible

Questions the generator will ask

jQuery*: jQuery 1.x, 2.x, Zepto, none
Angular modules*: animate, cookies, touch, sanitize
Resource handler*: ngResource, Restangular, none
Router*: ngRoute, UI Router, none
UI Framework*: Bootstrap, Foundation, none (depends on the chosen CSS preprocessor)
* TODO Bootstrap directives : UI Bootstrap, Angular Strap, none (only if you chose Bootstrap)
* TODO CSS preprocessor: less, sass, none
* TODO JS preprocessor: CoffeeScript, TypeScript, ECMAScript6 (Traceur)
* TODO HTML preprocessor: Jade ?
* TODO Script loader: Require, Browserify, ES6 with Require?, none
* TODO Test framework: Jasmine, Mocha, Qunit

Known issue

Protractor tests are not stable with PhantomJS, at least not on my Mac. I'm getting unpredictable disconnections between webdriverjs and phantomjs.

I tried many configurations for Protractor without success, any hint would be appreciated.

Changelog

$3

* Improves scaffolded code.

$3

* Initial commit
* Scaffolds a working Angularfire application

Thanks

@Swiip and his generator-gulp-angular project.

License

MIT