/ng-devstack

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

Primary LanguageJavaScriptMIT LicenseMIT

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