This is a starter demo for AngularJS using workflow tools to automate the builds and dependencies of the web applicaiton.
GULP - Javascript task runner, used to automate repetitive tasks (i.e., minifying, linting, testing, building, compiling) to simplify the build process.
BOWER - Manage front-end dependencies and serve css/js etc from the downloaded repo configured.
BROWSERIFY - Also manages front-end dependencies (mainly js) and works with NPM 'require' calls for including dependencies instead of script includes in the HTML documents.
Be sure to check NPM first before relying on Bower so you can take advantage of the simple require calls, via Browserify, which reduces code clutter and enables you to write modular, re-usable code.
This example uses Bower to crack jQuery dependency (just to demonstrate the use of bower). Other dependencies like angular, angular-ui-router are taken care by NPM via Browserify require calls, which loads dependencies from node_modules installed.
- Install Node js - Here
- Clone the repo
- Install the global requirements:
npm install -g gulp bower browserify - Install the local requirements:
npm install - Install the Bower components:
bower install - Run locally:
gulp - browserify : angular dependencies
- jshint : js validations
- connect to local server at port defined in the log (here : 8888)
- Run build:
gulp build - jshint : js validations
- css-minify : minify css and deploy to build folder
- browserify and js-minify : process angular dependencies, concat and minify to single js and copy to build folder
- copy-html-files : Copy HTML partial / non-partial files to deploy folder
- copy-bower-components : Copy bower_components dependency files to deploy folder
- connect to local server at port defined in the log (here : 9999) with app path pointing to build folder
- To clean the build:
gulp clean - Delete the deploy folder
- Delete the minified single js from app folder created from Run build (above)
Be sure to read the blog posts to learn how to create this setup from scratch: