1 | [![Build Status](https://travis-ci.org/cebor/rollup-plugin-angular.svg?branch=master)](https://travis-ci.org/cebor/rollup-plugin-angular)
|
2 |
|
3 | # rollup-plugin-angular
|
4 | Angular2 template and styles inliner for rollup
|
5 |
|
6 | ## Installation
|
7 | ```bash
|
8 | npm install --save-dev rollup-plugin-angular
|
9 | ```
|
10 |
|
11 | ## Example
|
12 | ```javascript
|
13 | // rollup.config.js
|
14 | import angular from 'rollup-plugin-angular';
|
15 | import typescript from 'rollup-plugin-typescript';
|
16 | import alias from 'rollup-plugin-alias';
|
17 | import nodeResolve from 'rollup-plugin-node-resolve';
|
18 |
|
19 | export default {
|
20 | entry: 'src/main.ts',
|
21 | format: 'iife',
|
22 | dest: 'dist/bundle.js',
|
23 | plugins: [
|
24 | angular(),
|
25 | typescript(),
|
26 | alias({ rxjs: __dirname + '/node_modules/rxjs-es' }), // rxjs fix (npm install rxjs-es)
|
27 | nodeResolve({ jsnext: true, main: true })
|
28 | ]
|
29 | }
|
30 | ```
|
31 |
|
32 | ## Template & Style preprocessing
|
33 | You may need to do some preprocessing on your templates & styles such as minification and/or transpilation.
|
34 |
|
35 | To do this you can pass a preprocessors object as an option, containing a style and/or template preprocessor.
|
36 |
|
37 | ### Signature
|
38 | ```typescript
|
39 | preprocessors: {
|
40 | template: (source: string, path: string) => string,
|
41 | style: (source: string, path: string) => string,
|
42 | }
|
43 | ```
|
44 | `source` - The contents of the style or template's file.
|
45 |
|
46 | `path` - The path to the loaded file. Can be useful for checking file extensions for example.
|
47 |
|
48 | returns the manipulated source as a string.
|
49 |
|
50 | ### Example
|
51 | The following example shows how you can use sass, clean-css (for css minification), and htmlmin.
|
52 |
|
53 | ```javascript
|
54 | // rollup.config.js
|
55 | import angular from 'rollup-plugin-angular';
|
56 | import typescript from 'rollup-plugin-typescript';
|
57 | import nodeResolve from 'rollup-plugin-node-resolve';
|
58 | import sass from 'node-sass';
|
59 | import CleanCSS from 'clean-css';
|
60 | import { minify as minifyHtml } from 'html-minifier';
|
61 |
|
62 | const cssmin = new CleanCSS();
|
63 | const htmlminOpts = {
|
64 | caseSensitive: true,
|
65 | collapseWhitespace: true,
|
66 | removeComments: true,
|
67 | };
|
68 |
|
69 | export default {
|
70 | entry: 'src/main.ts',
|
71 | format: 'iife',
|
72 | dest: 'dist/bundle.js',
|
73 | plugins: [
|
74 | angular({
|
75 | preprocessors: {
|
76 | template: template => minifyHtml(template, htmlminOpts),
|
77 | style: scss => {
|
78 | const css = sass.renderSync({ data: scss }).css;
|
79 | return cssmin.minify(css).styles;
|
80 | },
|
81 | }
|
82 | })
|
83 | typescript(),
|
84 | nodeResolve({ jsnext: true, main: true })
|
85 | ]
|
86 | }
|
87 | ```
|