Skip to content

Latest commit

 

History

History
204 lines (143 loc) · 5.5 KB

BUILD.md

File metadata and controls

204 lines (143 loc) · 5.5 KB
Raw

Build Instructions

Introduction

Angular Material has a sophisticated collection of build process and commands available... to deploy distribution files, test components, and more.

These commands are defined within two (2) gulp files:

Build Commands

For each milestone release, always run:

  • npm update to update your local gulp dependencies
  • bower update to update AngularJS dependencies

The following command line tasks are available:

  • gulp build (alias gulp) to build, add --release flag to uglify & strip console.log
  • gulp docs to build the Live Docs into dist/docs
  • gulp watch to build & rebuild on changes

  • gulp karma to test once
  • gulp karma-watch to test & watch for changes

### Building the Documentation

The Angular Material Live Docs are generated from the source code and demos and actually use the Angular Material components and themes.

Our build process uses dgeni, the wonderful documentation generator built by Pete Bacon Darwin.

See the Building the Live Documentation document for details.

### Building the Library

Developers can build the entire Angular Material library or individual component modules. The library comprises:

  • angular-material.js - components
  • angular-material.css - styles and default theme stylesheet
  • /themes/**.css - default theme override stylesheets

To build from the source, simply use:

# Build and deploy the library to
#
# - `dist/angular-material.js`
# - `dist/angular-material.css`
# - `dist/themes`

gulp build

# Build minified assets
#
# - `dist/angular-material.min.js`
# - `dist/angular-material.min.css`
# - `dist/themes`

gulp build --release

### Using the Library with Bower

For developers not interested in building the Angular Material library, use bower to install and use the Angular Material distribution files.

Change to your project's root directory.

# To get the latest stable version, use Bower from the command line.
bower install angular-material

# To get the most recent, latest committed-to-master version use:
bower install angular-material#master

Visit Bower-Material for more details on how to install and use the Angular Material distribution files within your own local project.


## Introducing Components

Angular Material supports the construction and deployment of individual component builds. Within Angular Material, each component is contained within its own module and specifies its own dependencies.

At a minimum, all components have a dependency upon the core module.

For example, the slider component is registered as a material.components.slider module.

### Building Individual Components

To build and deploy assets for each component individually, run the command

gulp build-all-modules

All component modules are compiled and distributed to:

 -- dist
    -- modules
       -- js
          -- core
          -- <component folder>

Let's consider the Slider component with its module definition:

/**
 * @ngdoc module
 * @name material.components.slider
 */
angular.module('material.components.slider', [
  'material.core'
]);

First build all the component modules.

To use - for example - the Slider component within your own application, simply load the stylesheets and JS from both the slider and the core modules:

 -- dist
    -- modules
       -- js
          -- core
             -- core.js
             -- core.css
          -- slider
             -- slider.js
             -- slider.css
             -- slider-default-theme.css

### Component Debugging

Debugging a demo in the Live Docs is complicated due the multiple demos loading and initializing. A more practical approach is to open and debug a specific, standalone Component demo.

To open a Component demo outside of the Docs application, just build, deploy and debug that component's demo(s).

For example, to debug the textfield component:

# Watch, build and deploy the 'textfield' demos
#
# NOTE: watch-demo will rebuild your component source
#       and demos upon each `save`
#
gulp watch-demo -c textfield

# launch the liveReload server on port 8080
#
# Note: livereload will reload demos after updates are
#       deployed (by watch-demo) to the dist/demos/
#
gulp server

The demo build process will deploy a self-contained Angular application that runs the specified component's demo(s). E.g.:

  • dist/demos/textfield/**/*.*
  • dist/demos/tabs/**/*.*
  • etc.

After running gulp server to start a LiveReload server in your project root:

  • Open browser to url http://localhost:8080/
  • Navigate to dist/demos/<component>/<demo>/index.html
  • Open Dev Tools and debug...

## Theming

https://material.angularjs.org/#/Theming/01_introduction