ng-boilerplate

Simple, easy and efficient build management system for angularjs apps. Built on Gulp.
Homepage:
1 person uses it

ng-boilerplate

Simple, easy and efficient build management system for angularjs apps. Built on Gulp.

The purpose of this project is to provide a boilerplate to quickly start building Angularjs applications. Inspired from ngbp but with the goodness, power and speed of Gulp. It's packed with all the tasks needed for development and production builds and provides best practices for structuring your angularjs apps.


Quick Start

Install Node.js and then:

Then, open file:ng-boilerplate/tmp/index.html in your browser. That's all you need to start adding code for your angularjs application (no need to run any node server).

Directory Structure

The driectory structure is based on angularjs best pratices and it makes maintaining and scaling the app super easy.

Configurations

File gulp/config.js contains all the configurations needed by gulp to run all the tasks.

Tasks

1. Default

Run by typing gulp. This task creates a development build of the angularjs app under the path specified in config above. All the source files are also being watched, so, when you change/add/delete/rename a file, the build is also updated and browser is refreshed automatically to display changes. Sweet :)

2. Compile

Run by typing gulp compile. This task create a production build of the angularjs app under the path specified in config above. All js and css files are concatinated and minified. The resulting js and css files are also versioned. All partials are minified and added to angular's template cache and the index file is also minified. Also, images are optimzed.

Features

  • Scripts
    • Supported formats js and coffee.
    • Lint
    • ng-Annotate
    • Concat and uglify
  • Stylesheets
    • Supported formats css, scss and less.
    • Autoprefixer
    • Concat and minify
  • Image optimization
  • Template caching for partials
  • Livereload
  • Bower for managing front-end dependencies.

Bower Info

When adding front-end dependencies using bower, first run

bower install [PACKAGE_NAME] --save-dev

Then mention paths to all the css, js and font files offered by the package in gulp/config.js. That's all.

Author

Muhammad Usman (http://github.com/uxman-sherwani)

comments powered by Disqus
This page was last updated over 1 year ago.