Angular/Foundation6 best practices template: fork from http://paislee.io/a-healthy-gulp-setup-for-angularjs-projects
+ support for Fondation-6 for App http://foundation.zurb.com/apps/docs/#!/
+ support for NodeJS V4+V5
+ sample based on a components somehow similar to what Angular-2 should use
+ support development and production mode [javascript html partial templates are loaded in the right order where ever they are within dev tree]
+ support node debugger in development mode [tested with Netbeans 8.1, but should work with any]
0. Install Node.js
1. Download/Install healthy-gulp-angular-foundation6 from https://github.com/iotbzh/healthy-gulp-angular-foundation6
2. npm install
3. npm run start
Optional: Chrome/LiveReload (https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
A. ./node_modules/.bin/gulp help
B. ./node_modules/.bin/gulp watch-dev
Note: if gulp is installed globally you may use directly "gulp help"
# Create a ".noderc.js" at project root to overload .app/etc/AppDefault.js
var config= {
APPNAME: "MyFirstApp" // replace @@APPNAME@@ in Index.html & app.js for dev/prod
HOST : "localhost", // listen on a specific interface/IP [default==localhost]
PORT : 8081, // httpd port [default 8080]
DEBUG : 9081, // nodejs debug port in dev mode [comment to remove debug in devmod]
URLBASE: '/' // URL base for rewriting should match with your http server application base [default/]
};
module.exports = config;
+ Check Angular & Angular-Animate get the exact same version otherwise you may get an error looking like " [$injector:unpr] Unknown provider: $$asyncCallbackProvider"
+ Gulp watch modification only on existing files. Adding a new file will not be detected. User should restart Gulp watch command
+ In some case automatic update notification to browser fail and page has to be reloaded manually
+ When using IDEs it's easy to have multiple GULP process watching the same thing!!! In case of doubt when having strange result 'pkill -9 gulp; pkill -9 node"
The project ships with a directory structure like:
/MyProject
|
|-- gulpfile.js // Check 'gulp help' for options
|-- package.json
|-- bower.json
|-- .noderc.js [Warning: contains private keys DO-NOT upload in Github]
|
|--- /app
| |
| |---etc
| | |
| | | AppDefault.js // Default config for Application
| |
| |---Backend [HTTPd server production/mock]
| | |--- server.js // server bootstrap and options
| | |--- /RestApi
| | | | _all.js // API module registration
| | | | SampleApi.js // As many API modules as needed
| |
| |---Frontend [Angular/Foundation HTML5 app]
| | |--- index.html // index template should not need any changes
| | |--- app.js // main entry point should register here every pages module
| | |
| | |--- /styles // your global SASS files and Foundation6 config
| | | |--- _settings.scss
| | | |---- app.scss
| | |
| | |--- /Widgets // Add as many widgets Directories/Files as needed
| | | |--- Widget-1
| | | |... Widget-xxx
| | |
| | |----/Pages // Partial Directory/Files as needed
| | | |--- Home Partial
| | | |--- Any Other Partials
| | |
| | |----/xxxx // Partial/Widget/Style may sit in as many directories as needed
| |
|
|--- (/dist.dev) // received copy of JS/HTML during debug session
|--- (/dist.prod // received compressed JS/HTML for production mode
NOTE: By convention Directory/Files name starting by an Uppercase can be customised.
Changing those ones starting by lowercase might break GULP config.