Skip to content

Latest commit

 

History

History
95 lines (64 loc) · 2.33 KB

README.md

File metadata and controls

95 lines (64 loc) · 2.33 KB
Raw

agile-grenoble

Install, Build, Run

npm install -g bower gulp
npm install && bower install
gulp [serve]

Gulp tasks

gulp clean # delete public/build and public/dist folders
gulp build # build the project for dev (in public/build)
gulp [serve] # build & launch a browser-sync server (with a watch)
gulp dist # package the project for prod (in public/dist)

Folder structure

/public
  - /src
    - /app
      - /shell # the "shell" of the website (header, footer, ...)
      app.ts # main module declaration & .config
    - /app.pages
      - /<page>
        - /i18n # i18n for this "page"
          <locale>.json # one json per locale
        <page>.ts # controller / state declaration and whatnot
        <page>.scss # page specific styles
        <page>.html # page template
      app.pages.ts # module declaration
    - /app.services
      - /<service>
        - <service>.service.ts # service declaration
    index.html # app entry point
    main.scss # app-wide styles
  - /images # image assets for the project
  - /lib # bower dependencies
  - /build # dest folder for dev build
  - /dist # dest folder for prod package

Build process

HTML

Templates (in src/app/ & src/app.pages) are minified and put in $templateCache

index.html is minified and dependencies are:

  • injected via wiredep (build)
  • concatenated via useref (dist)

Scripts

TypeScript is transpiled (build) and concatenated + uglyfied (dist)

Styles

Sass (build) and concatenated + minified + purified (dist)

Images & Fonts

Copied to dist (dist)

I18N

json files are concatenated by locale (build) & copied to dist (dist)

How to add a page

  • Create a folder under public/src/app.pages named <my-page>

  • Create ts, html & scss files inside

  • create sub-folder i18n and <locale>.json files if needed

  • Declare your state in ts file (see demo page for example)

    • /!\ your state must be a child of the shell state (e.g.: shell.<my-page>) if you want header, footer, ...

  • Add logic, template, styles, whatever...

How to add a sponsor

  • add logo file under public/images/sponsors

  • modify html adding link to logo in public/src/app.pages/home/home.html

  • modify html adding information about the sponsor (link to logo, description and link to website) in public/src/app.pages/sponsors/sponsors.html