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