Skip to content

Commit

Permalink
added notes for new bundling system in Core MVC project
Browse files Browse the repository at this point in the history
  • Loading branch information
ismcagdas committed Jun 13, 2018
1 parent 86e1910 commit a5d0b3c
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 28 deletions.
41 changes: 21 additions & 20 deletions doc/Development-Guide-Core.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,23 @@ Before reading this document, it's suggested to run the application and explore

Following tools are needed in order to use ASP.NET Zero Core solution:

- [Visual Studio 2017 v15.3.5](https://www.visualstudio.com)+
- Visual Studio Extensions:
- [Web
Compiler](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler)
- [Typescript](https://www.microsoft.com/en-us/download/details.aspx?id=48593)
2.0+
- [nodejs](https://nodejs.org/en/download/) 6.9+ with npm 3.10+
- [gulp (must be installed
globally)](https://www.npmjs.com/package/gulp)
- [yarn](https://yarnpkg.com/)
- SQL Server
- [Visual Studio 2017 v15.3.5](https://www.visualstudio.com)+

- Visual Studio Extensions:
- [Web
Compiler](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler)
- [Typescript](https://www.microsoft.com/en-us/download/details.aspx?id=48593)
2.0+

- [nodejs](https://nodejs.org/en/download/) 6.9+ with npm 3.10+

- [gulp (must be installed

globally)](https://www.npmjs.com/package/gulp)

- [yarn](https://yarnpkg.com/)

- SQL Server

#### Solution Structure (Layers)

Expand Down Expand Up @@ -1154,18 +1160,13 @@ node\_modules folder will be very big (more than 250 MB) and we don't
want to send all of those files to production when we publish our
application. In order to overcome this, we have used gulp to move
necessary files from **\*.Web.Mvc/node\_modules** to
**\*.Web.Mvc/wwwroot/lib**. There are two related files in \*.Web.Mvc
project, **bundle.config.js** and **gulpfile.js**. **bundle.config.js**
contains necessary mapping definitions from node\_modules to lib folder
and it also contains bundling & minification definitions. You can see
respectively in below screenshots mapping and bundling/minification
configurations from bundle.config.js.
**\*.Web.Mvc/wwwroot/lib**. Mapping from node_modules to wwwroot/lib folder is defined in **package-mapping-config.js** file. So, when you add a new package to your solution, you also need to add a mapping to this file defining the files you want to move from node_modules to wwwroot/lib folder for newly added package.

<img src="images/gulp-bundle-config-mappings.png" alt="Gulp mappings" class="img-thumbnail" />
Here is a sample **package-mapping-config.js** file;

<img src="images/gulp-bundle-config-bundles.png" alt="Gulp bundling minification" class="img-thumbnail" />
<img src="images/gulp-bundle-config-mappings.png-2.png" alt="Gulp mappings" class="img-thumbnail" />

In order to create css and javascript bundles "gulp" command must be runned in the root directory of ***.Web.Mvc** solution using a command prompt. This can be done using Visual Studio's Task Runner Explorer. Default gulp task doesn't end and it watches for changes in the css & javascript files used in **bundle.config.js** file. If ""--prod" argument is not passed to gulp command, css and javascript bundles will not be minified in order to provide developers a better debug experience. Running "**gulp --prod**" command will minify output css and javascript files. For Continuous Integration pipelines "gulp build:prod" command can be used, because this task ends with an exit code so, CI environments can understand.
In order to create css and javascript bundles https://www.nuget.org/packages/BundlerMinifier.Core/ package is used. Bundling definitions are stored in **bundleconfig.json** file. If you don't want to modify this file manually, you can use https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier Visual Studio extension to create bundling definitions for you.

#### Application Services as MVC API Controllers

Expand Down
11 changes: 3 additions & 8 deletions doc/Getting-Started-Core.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,15 +96,10 @@ can **disable** it by setting

### Run The Project

Before running the project, we need to run gulp to bundle and minify our
css and javascript files. In order to do that, we can open Visual
Studio's task runner and run the default task.
Before running the project, we need to run a npm task to bundle and minify our
css and javascript files. In order to do that, we can open a command prompt, navigate to root directory of

<img src="images/taskrunner-gulp-core-1.png" alt="install npm dependencies" class="img-thumbnail" />

or, we can open a command prompt, navigate to root directory of
**\*.Web.Mvc** project and run "**gulp**" command (gulp must be
installed globally for this option)
**\*.Web.Mvc** project and run "**npm run create-bundles**" command. This command must be runned when a new npm package is added to the solution. Otherwise, you can just build your solution and all bundles will be updated automatically.

Now we are ready.. just run your solution. It will open login page of
your web site.
Expand Down
Binary file added doc/images/gulp-bundle-config-mappings.png-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a5d0b3c

Please sign in to comment.