karol-f / ng-devstack

Everything a front-end developer needs to simplify building AngularJS applications.

ng-devstack v0.2.3

Everything a front-end developer needs to simplify building AngularJS applications.

Why ng-devstack?

This project has been inspired by another great concept ngBoilerplate, allowing to create modern web applications in AngularJS. It follows all the best practices introduced in ngBoilerplate such as component/feature-oriented directory structure, intelligent build system, etc. However, I decided to improve it a little bit and create my own boilerplate from scratch since I missed some basic features like:

• watch for any file changes and apply them to the project in real-time,
• image optimization,
• remove redundant code on compiling output HTML,
• plus ngBoilerplate hasn't been updated for months.

Now this all has been made possible. Please welcome ng-devstack!

Features

• integration with gulp,
• package management with Bower,
• feature-oriented directory structure,
• unit testing with Karma,
• LiveReload fully handled server-side with NodeJS/Express (without installing additional extensions for browsers),
• watch for file changes (scripts, styles, templates, assets) and apply them to the project on the fly,
• caching AngularJS templates to avoid additional server requests,
• pre-minifying AngularJS files to fix AngularJS' dependency injection upon minification,
• support for SASS (including Twitter Bootstrap official SASS port),
• support for JSHint,
• JS/CSS/HTML minification,
• remove logging (console.log(), etc.) from compiled JS code,
• image optimization (see Additional Info for details),
• html5Mode support (see Additional Info for details),
• integration with UI Router & UI Bootstrap.

Requirements

• NodeJS
• Bower

Installation

1. Install gulp globally, which is giving access to gulp's CLI:

$ npm install gulp -g

2. Install gulp locally to the project with other required plugins:

$ npm install

3. Install required libraries:

$ bower install

Usage

To build the application simply type:

$ gulp build

For development purposes, run watch task to build and start local web server with LiveReload:

$ gulp watch

Deploy the production version by running gulp compile, or simpler:

$ gulp

Additional info

All styles (as well as scripts and templates) added to src/app/ and src/common/ should be included to the project automatically - except to src/sass/ folder. Files put into src/sass/ must be manually imported in src/sass/main.scss file (you may want to set custom order for loading your styles). If files located in src/sass/ are not imported in src/sass/main.scss, they will not work!

Vendor files downloaded with Bower can be added to project by editing 'vendor_files' section in config.json file. The rest of this file should remain unchanged.

If you would like to enable AngularJS HTML5 mode, you have to uncomment 2 lines in src/app/app.js and server.js:

• src/app/app.js (don't forget to inject $locationProvider):

// $locationProvider.html5Mode(true);

• server.js:

// app.use(require('connect-modrewrite')(['!\\.\\w+$ /index.html']));

In addition, image optimization is turned off by default but in case you need it, don't hesitate to remove comment from the following line in gulpfile.js:

// .pipe(plugins.imagemin({ optimizationLevel: 5, progressive: true }))

TODO

• add support for external sources in vendor files (http://*)
• add source maps support for SASS & JS
• add authorization service
• improve images/SVG optimization