Skip to content

iotbzh/healthy-gulp-angular-foundation6

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code
This branch is 21 commits ahead of calebds:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Angular/Foundation6 best practices template: fork from http://paislee.io/a-healthy-gulp-setup-for-angularjs-projects

Modifications from original version

    + 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]

Installation

    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)

Using Gulp

    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"

customisation

# 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;

Bugs

    + 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"

Project Structure

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. 

About

A starting point for Gulp + Angular

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 57.0%
  • CSS 37.9%
  • HTML 5.1%