ng-extra-build

ng-extra-build is a build tool for angular-cli, you can use this for extra building tasks that angular-cli can't do, especially for multi-environment.

Features

• Copy resources for the specified environment.
• Compile and compress css file for the specified environment.
• Merge i18n files for the specified environment.
• Replace contents in final packaged file for the specified environment.
• Delete files
• Compress files

Getting Started

Installation

npm install ng-extra-build --save-dev

Usage

Configuration

After ng-extra-build installation is completed, you can find a configuration file named build.conf.json in $your_project_dir, you should modify this file as your requirements. See Configuration Reference.

Command

Append below command after angular-cli build command:

ng-extra-build -env=envName -config=config-file-path

For example, if neware is one of your envoriment name, add below json content in $Your_project_dir/package.json:

1{
2  ...
3  "scripts": {
4    "ng": "ng",
5    "start": "ng serve",
6    "neware": "ng build -prod -sm=false -aot -e neware && ng-extra-build -env=neware"
7  },
8  ...
9}

And then execute command

npm run neware

to build application for production.

Command Arguments

Argument	Required	Default	Description
-env	true	null	Envrionment name
-config	false	build.conf.json	Configuration file path. The file path is relative to current working direction (same as path.cwd() in nodejs)

Configuration Reference

• base (object): The base config.

  • outDir (string): The output directory for build results.This value must set be same as outDir in Angular CLI.

• copy (array): Copy resources into outDir.

  • from (string): Source file which will be copied.
  • to (string): Destination file which will be copied to.

• css (object): Css compile options.

  • from (string): Source css file.
  • to (string): Destination css file.
  • devUrl (string): The css href in tag <link> in index.html for the development environment.After build, will replace this href with production environment href.

• i18n (object): Build options for i18n files

  • source (string): Directory of source i18n files
  • extra (string): Directory of extra i18n files
  • target (string): Directory of target i18n files

• replacement (array): Replacement configurations

  • file (string): The file (path) you want to execute the replacement.
  • contents (array): Contents you want to replace.
    • replace (string): Contents you want to replace.
    • with (string): Contents you want to replace with
    • withEnv (object): Contents you want to replace with for the specified environment. key is environment name, value is corresponding content you want to replace with.

• deletion (array): Files you want to delete.

• compression (object): Compression configurations.

Example Configuration File

1{
2  "$schema": "./node_modules/ng-extra-build/schema.json",
3  "base": {
4    "outDir": "dist"
5  },
6  "copy": [
7    {
8      "from": "$root/src/env/$env/favicon.ico",
9      "to": "$dist/favicon.ico"
10    }
11  ],
12  "css": {
13    "from": "$root/src/env/$env/css/theme.css",
14    "to": "$dist/assets/css",
15    "devUrl": "env/neware/css/theme.css"
16  },
17  "i18n": {
18    "source": "$root/src/assets/i18n",
19    "extra": "$root/src/env/$env/i18n",
20    "target": "$dist/assets/i18n"
21  },
22  "replacement": [
23    {
24      "file": "$dist/index.html",
25      "contents": [
26        {
27          "replace": "Neware Club",
28          "withEnv": {
29            "neware": "Neware RSP",
30            "joy": "Joytele RSP"
31          }
32        }
33      ]
34    }
35  ],
36  "deletion": [
37    "$dist/env"
38  ],
39  "compression": {
40    "from": "$dist",
41    "to": "$root"
42  }
43}
44