Skip to content

Commit a5d0b3c

Browse files
committed
added notes for new bundling system in Core MVC project
1 parent 86e1910 commit a5d0b3c

File tree

3 files changed

+24
-28
lines changed

3 files changed

+24
-28
lines changed

doc/Development-Guide-Core.md

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,23 @@ Before reading this document, it's suggested to run the application and explore
88

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

11-
- [Visual Studio 2017 v15.3.5](https://www.visualstudio.com)+
12-
- Visual Studio Extensions:
13-
- [Web
14-
Compiler](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler)
15-
- [Typescript](https://www.microsoft.com/en-us/download/details.aspx?id=48593)
16-
2.0+
17-
- [nodejs](https://nodejs.org/en/download/) 6.9+ with npm 3.10+
18-
- [gulp (must be installed
19-
globally)](https://www.npmjs.com/package/gulp)
20-
- [yarn](https://yarnpkg.com/)
21-
- SQL Server
11+
- [Visual Studio 2017 v15.3.5](https://www.visualstudio.com)+
12+
13+
- Visual Studio Extensions:
14+
- [Web
15+
Compiler](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler)
16+
- [Typescript](https://www.microsoft.com/en-us/download/details.aspx?id=48593)
17+
2.0+
18+
19+
- [nodejs](https://nodejs.org/en/download/) 6.9+ with npm 3.10+
20+
21+
- [gulp (must be installed
22+
23+
globally)](https://www.npmjs.com/package/gulp)
24+
25+
- [yarn](https://yarnpkg.com/)
26+
27+
- SQL Server
2228

2329
#### Solution Structure (Layers)
2430

@@ -1154,18 +1160,13 @@ node\_modules folder will be very big (more than 250 MB) and we don't
11541160
want to send all of those files to production when we publish our
11551161
application. In order to overcome this, we have used gulp to move
11561162
necessary files from **\*.Web.Mvc/node\_modules** to
1157-
**\*.Web.Mvc/wwwroot/lib**. There are two related files in \*.Web.Mvc
1158-
project, **bundle.config.js** and **gulpfile.js**. **bundle.config.js**
1159-
contains necessary mapping definitions from node\_modules to lib folder
1160-
and it also contains bundling & minification definitions. You can see
1161-
respectively in below screenshots mapping and bundling/minification
1162-
configurations from bundle.config.js.
1163+
**\*.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.
11631164

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

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

1168-
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.
1169+
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.
11691170

11701171
#### Application Services as MVC API Controllers
11711172

doc/Getting-Started-Core.md

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -96,15 +96,10 @@ can **disable** it by setting
9696

9797
### Run The Project
9898

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

103-
<img src="images/taskrunner-gulp-core-1.png" alt="install npm dependencies" class="img-thumbnail" />
104-
105-
or, we can open a command prompt, navigate to root directory of
106-
**\*.Web.Mvc** project and run "**gulp**" command (gulp must be
107-
installed globally for this option)
102+
**\*.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.
108103

109104
Now we are ready.. just run your solution. It will open login page of
110105
your web site.
Loading

0 commit comments

Comments
 (0)