ng-devstack v0.3.2

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,
each AngularJS module separated into separate file (much more suited for bigger applications),
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 SASS source maps,
support for JSHint,
support for CSS Autoprefixer,
JS/CSS/HTML minification,
remove redundancies (console.log(), multiple occurrences of 'use strict' statement, 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 - with a small difference to src/sass/ folder. Partials SASS files (such as variables, mixins, etc.) put into src/sass/includes/ must be manually imported in src/sass/_includes.scss file (you may want to set custom order for loading your styles). Partials located in src/sass/includes/ should be named with a leading underscore _, so the compiler knows not to generate them into a CSS file (see SASS official site for details).

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: 7, progressive: true, interlaced: true }))

TODO

add support for external sources in vendor files (http://*)
substitute local vendor files with CDN resources
add authorization service
improve images/SVG optimization

lrodziewicz/ng-devstack