# angular-material-tools > Build tools for AngularJS Material Latest version **1.0.0** (published 2020-11-06) · MIT license · 0 weekly downloads ## Install ```sh npm install angular-material-tools pnpm add angular-material-tools yarn add angular-material-tools bun add angular-material-tools ``` Provides the command `material-tools`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2020-11-06 | | First published | 2016-07-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | 10 | | Dependencies | 16 | | Unpacked size | 105.3 KB | | Known vulnerabilities | 0 (+13 in 4 direct dependencies) | | Install scripts | no | | GitHub stars | 48 | | Maintainers | angularcore, angular, splaktar, crisbeto, devversion | ## Links - npm: https://www.npmjs.com/package/angular-material-tools - Repository: https://github.com/angular/material-tools - Homepage: https://github.com/angular/material-tools#readme - Issues: https://github.com/angular/material-tools/issues - npm.io page: https://npm.io/package/angular-material-tools ## Dependencies (16) - [glob](https://npm.io/package/glob.md) ^7.1.6 - [merge](https://npm.io/package/merge.md) ^1.2.1 - [yargs](https://npm.io/package/yargs.md) ^16.1.0 - [tar-fs](https://npm.io/package/tar-fs.md) ^2.1.0 - [angular](https://npm.io/package/angular.md) ^1.8.2 - [postcss](https://npm.io/package/postcss.md) ^8.1.4 - [request](https://npm.io/package/request.md) ^2.88.2 - [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1 - [clean-css](https://npm.io/package/clean-css.md) ^4.2.3 - [node-sass](https://npm.io/package/node-sass.md) ^4.14.1 - [uglify-js](https://npm.io/package/uglify-js.md) ^3.11.4 - [cssbeautify](https://npm.io/package/cssbeautify.md) ^0.3.1 - [angular-aria](https://npm.io/package/angular-aria.md) ^1.8.2 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.0.1 - [angular-animate](https://npm.io/package/angular-animate.md) ^1.8.2 - [angular-messages](https://npm.io/package/angular-messages.md) ^1.8.2 ## Recent versions - 1.0.0 (latest) — 2020-11-06 - 1.0.0-rc.3 — 2020-10-30 - 1.0.0-rc.2 — 2020-10-30 - 1.0.0-rc.1 — 2020-10-29 - 1.0.0-rc.0 — 2020-10-29 - 1.0.0-beta.9 — 2020-02-07 - 1.0.0-beta.8 — 2017-08-24 - 1.0.0-beta.7 — 2017-08-24 - 1.0.0-beta.6 — 2017-01-29 - 1.0.0-beta.5 — 2016-12-11 - 1.0.0-beta.4 — 2016-12-08 - 1.0.0-beta.3 — 2016-08-03 - 0.0.1 — 2016-07-15 ## README # angular-material-tools Tool that generates custom [AngularJS Material](http://github.com/angular/material) builds, consisting of: * JS files for a set Material components * CSS for a set of components * Static theme files * Layout CSS, separated from the specific component styling ## Quick Links - [Installation](#installation) - [Available Options](#options) - [CLI Usage](#cli-usage) - [NodeJS Usage](#nodejs-usage) - [Theme Building](#theming) - [Development Environment](#development) ## Installation - `npm install angular-material-tools --save` ## Usage `material-tools` can be easily used from the **command-line** or from your own custom **NodeJS** code. The build tools also include a CLI, which can be used by installing the tools globally. - `npm install -g angular-material-tools` ### Options | Name | Type | Description | | ----------------------- | ----------- | -------------------------------------------------------------------------- | | `destination` (*) | `string` | Target location for the Material build. | | `modules` | `string[]` | Modules that should be part of the build.
All modules will be built if nothing is specified. | | `version` | `string` | Version of AngularJS Material.
If set to `local`, it will take the local installed AngularJS Material version from the node modules.
If set to `latest`, the latest version will be downloaded. | | `theme` | `MdTheme` | Material Theme to be used to generate a static theme stylesheet. | | `themes` | `MdTheme[]` | Multiple Material Themes, which are used to generated a static stylesheet. | | `cache` | `string` | Directory for caching the downloads | | `mainFilename` | `string` | Name of the entry file that will be loaded to figure out the dependencies. | | `destinationFilename` | `string` | Name to be used as a base for the output files. | > **Note:** The options can be set in a JSON file whose path can be passed to the CLI or API. ### CLI usage To create a custom AngularJS Material build with the command-line interface (CLI), you can pass the [options](#options) as CLI arguments. All possible options in the CLI can be listed with the command: - `material-tools --help` The CLI includes the following commands: | Name | Arguments | Description | | ----------------------------------- | ----------------------------------- | ---------------------------------------------- | | `` | Everything from [options](#options) | Default command that builds all files. | | `material-tools js ` | Everything from [options](#options) | Only builds the JS files. | | `material-tools css ` | Everything from [options](#options) | Only builds the CSS files | | `material-tools theme ` | Everything from [options](#options)

`--name`
`--primary-palette`
`--accent-palette`
`--warn-palette`
`--background-palette`
`--dark` | Builds the theme files for a single theme. | | `material-tools themes ` | Everything from [options](#options)

`--name`
`--primary-palette`
`--accent-palette`
`--warn-palette`
`--background-palette`
`--dark` | Builds the theme files for an array of themes. | **Examples** ```bash material-tools --destination ./output --modules list datepicker autocomplete --version 1.2.1 ``` If you do not specify a version, the CLI will automatically use the installed AngularJS Material version from your local `node_modules` directory. ```bash material-tools -d ./output -m list ``` ---- ### NodeJS usage ```js const MaterialTools = require('angular-material-tools'); let tools = new MaterialTools({ destination: './output', version: '1.2.1', modules: ['menu', 'checkbox'], theme: { primaryPalette: 'indigo', accentPalette: 'purple', warnPalette: 'deep-orange', backgroundPalette: 'grey' } }); const successHandler = () => console.log('Build was successful.'); const errorHandler = error => console.error(error); tools.build().then(successHandler).catch(errorHandler); // Build all JS/CSS/themes tools.build('js').then(successHandler).catch(errorHandler); // Only build the JS. tools.build('theme').then(successHandler).catch(errorHandler); // Only build the theme. tools.build('css').then(successHandler).catch(errorHandler); // Only build the CSS // You can also build a subset of files. tools.build('css', 'js'); // Builds both the CSS and the JS. ``` #### Output Files | File | Description | | ---------------------------------------- | ------------------------------------------------------------------------------------ | | `angular-material.js` | Contains the modules that you specified, as well as their dependencies. | | `angular-material.css` | CSS files that has the modules you selected, as well as the layout CSS and core CSS. | | `angular-material.layout-none.css` | Only contains the modules that you selected, in addition to the core structural CSS. | | `angular-material.themes.css` | Static generated theme stylesheet, which includes all generated themes. | | `angular-material.layouts.css` | Standalone Layout stylesheet with class selectors | | `angular-material.layout-attributes.css` | Standalone Layout stylesheet with attribute selectors | ---- ### Theming Developers are able to easily build a static theme stylesheet ```js { destination: './myBuild', version: '1.2.1', modules: ['list'], theme: { primaryPalette: 'blue', accentPalette: 'grey' } } ``` In some cases you may want to have multiple themes in your application. ```js { themes: [{ name: 'firstTheme', primaryPalette: 'red' }, { name: 'secondTheme', primaryPalette: 'blue' }] } ``` It is also possible to use [custom palettes](https://material.angularjs.org/latest/Theming/03_configuring_a_theme) for your static theme. ```js { theme: { primaryPalette: 'light-orange', accentPalette: 'blue' }, palettes: { 'light-orange': { '50': 'FBE9E7', '100': 'FFCCBC', '200': 'FFAB91', '300': 'FF8A65', '400': 'FF7043', '500': 'FF7043', '600': 'F4511E', '700': 'E64A19', '800': 'D84315', '900': 'BF360C', 'A100': 'FF9E80', 'A200': 'FF6E40', 'A400': 'FF3D00', 'A700': 'DD2C00', 'contrastDefaultColor': 'light', 'contrastDarkColors': ['50', '100', '200', '300', '400', 'A100', 'A200'], 'contrastStrongLightColors': ['500', '600', '700', '800', '900', 'A400', 'A700'] } } } ``` Sometimes you want to create a custom palette which is based on another one. > Material Tools for AngularJS Material provides an easy way to extend palettes. ```js { theme: { primaryPalette: 'darkerRed', accentPalette: 'blue' }, palettes: { 'darkerRed': { extends: 'red', contrastDefaultColor: 'dark' } } } ``` ### Development If you've cloned the repo, a quick way to explore NodeJS usages is to *directly* run TypeScript without transpiling processes. Developers can use [ts-node](https://github.com/TypeStrong/ts-node) for this. Install a TypeScript compiler (requires `typescript` by default): ```bash npm install -g ts-node typescript ``` Then use the command-line to directly run the `debug.ts` sample from the project root: ```bash ts-node debug.ts ``` which will generate the output: ```bash [13:37:00]: Successfully built list, core, animate, layout, gestures, theming, palette, datepicker, icon, virtualRepeat, showHide. ``` --- _Source: https://npm.io/package/angular-material-tools · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._