From d794b7ac5251f318a8c6b1497da42fa60362296c Mon Sep 17 00:00:00 2001 From: Ilkay Ilknur Date: Wed, 18 Nov 2020 14:30:28 +0300 Subject: [PATCH 1/2] bundle command added. --- docs/en/CLI.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/en/CLI.md b/docs/en/CLI.md index 48ec779c1e..a119770286 100644 --- a/docs/en/CLI.md +++ b/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) \ No newline at end of file From 11f7dd8f79f8915bd19348cb096f324ebd445921 Mon Sep 17 00:00:00 2001 From: Ilkay Ilknur Date: Wed, 18 Nov 2020 14:30:43 +0300 Subject: [PATCH 2/2] global scripts and styles documentation. --- docs/en/UI/Blazor/Global-Scripts-Styles.md | 37 +++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/docs/en/UI/Blazor/Global-Scripts-Styles.md b/docs/en/UI/Blazor/Global-Scripts-Styles.md index ae473351f0..561eed27f6 100644 --- a/docs/en/UI/Blazor/Global-Scripts-Styles.md +++ b/docs/en/UI/Blazor/Global-Scripts-Styles.md @@ -1,3 +1,38 @@ # Blazor UI: Managing Global Scripts & Styles -TODO \ No newline at end of file +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. \ No newline at end of file