Browse Source

Merge pull request #6259 from abpframework/managing-3rd-party-dependencies

Blazor Bundling documentation
pull/6279/head
Halil İbrahim Kalkan 6 years ago
committed by GitHub
parent
commit
2f86e324b9
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 18
      docs/en/CLI.md
  2. 37
      docs/en/UI/Blazor/Global-Scripts-Styles.md

18
docs/en/CLI.md

@ -41,6 +41,7 @@ Here, the list of all available commands before explaining their details:
* **`login`**: Authenticates on your computer with your [abp.io](https://abp.io/) username and password.
* **`logout`**: Logouts from your computer if you've authenticated before.
* **`build`**: Builds a GIT repository and depending repositories or a single .NET solution.
* **`bundle`**: Generates script and style references for an ABP Blazor project.
### help
@ -400,3 +401,20 @@ abp build --build-name "prod" --dotnet-build-arguments "\"--no-dependencies\""
For more details, see [build command documentation](CLI-BuildCommand.md).
#### bundle
This command generates script and style references for an ABP Blazor project and updates the **index.html** file. It helps developers to manage dependencies required by ABP modules easily. In order ```bundle``` command to work, its **executing directory** or passed ```--working-directory``` parameter's directory must contain a Blazor project file(*.csproj).
Usage:
````bash
abp bundle [options]
````
#### Options
* ```--working-directory``` or ```-wd```: Specifies the working directory. This option is useful when executing directory doesn't contain a Blazor project file.
* ```--force``` or ```-f```: Forces to build project before generating references.
For more details about managing style and script references in Blazor apps, see [Managing Global Scripts & Styles](UI/Blazor/Global-Scripts-Styles.md)

37
docs/en/UI/Blazor/Global-Scripts-Styles.md

@ -1,3 +1,38 @@
# Blazor UI: Managing Global Scripts & Styles
TODO
Some modules may require additional styles or scripts that need to be referenced in **index.html** file. It's not easy to find and update these types of references in Blazor apps. ABP offers a simple, powerful, and modular way to manage global style and scripts in Blazor apps.
To update script & style references without worrying about dependencies, ordering, etc in a project, you can use the [bundle command](../../CLI.md#bundle).
You can also add custom styles and scripts and let ABP manage them for you. In your Blazor project, you can create a class implementing `IBundleContributer` interface.
`IBundleContributer` interface contains two methods.
* `AddScripts(...)`
* `AddStyles(...)`
Both methods get `BundleContext` as a parameter. You can add scripts and styles to the `BundleContext` and run [bundle command](../../CLI.md#bundle). Bundle command detects custom styles and scripts with module dependencies and updates `index.html` file.
## Example Usage
```csharp
namespace MyProject.Blazor
{
public class MyProjectBundleContributer : IBundleContributer
{
public void AddScripts(BundleContext context)
{
context.Add("site.js");
}
public void AddStyles(BundleContext context)
{
context.Add("main.css");
context.Add("custom-styles.css");
}
}
}
```
> There is a BundleContributer class implementing `IBundleContributer` interface coming by default with the startup templates. So, most of the time, you don't need to add it manually.
> Bundle command adds style and script references individually. Bundling and minification support will be added to incoming releases.
Loading…
Cancel
Save