Reorganize external dependencies in the wwwroot directory using gulp

Question

Reorganize external dependencies in the wwwroot directory using gulp

In my development setup using VS 2015, ASP.net vnext, Angular 2, Typescript, and gulp.js, I have successfully automated the process of moving my scripts/**/*.ts files to the wwwroot/app folder. Now, I am looking to extend this automation to include my libraries such as Angular 2. Essentially, I want a gulp task that will:

Inject angular.js into index.html within the
```
<environment names="Development">
```
node
Inject angular.min.js into index.html within the
```
<environment names="Production">
```
node

The key requirement here is for this process to be dynamic and work seamlessly with all libraries in my project:

<any>.min.js (for production)
<any>.js (for development)

I am capable of handling the minification of any.js myself. However, implementing this using data from the dependencies in the package.json file has proven challenging for me.

Therefore, I am seeking guidance on whether there are existing tools or approaches to streamline this process. Should I break down the workflow into manual steps, such as manually copying and pasting certain libraries? Or could I possibly extract the name of the dependencies and append them with .js, then retrieve these files from the node_modules folder (although this approach feels hacky and potentially unsafe)?

UPDATE

Rephrased/Clarified question:

How can I automatically incorporate my npm dependencies (excluding devDependencies) into the "Development" environment node when triggering specific events like build/clear processes?

javascript build npm gulp asp.net-core

Answer 1

Answer №1

If you're looking to simplify including multiple JavaScript files, there's a handy tag helper called asp-src-include at your disposal.

Picture a scenario where you have several *.js files that need to be included:

<script src="/app/app.js"></script>
<script src="/app/controller/controllerA.js"></script>
<script src="/app/controller/controllerB.js"></script>
<script src="/app/service/userservice.js"></script>

Instead of listing them individually, you can streamline the process with just one tag.

<script asp-src-include="~/app/**/*.js"></script>

When it comes to deploying for Production/Development environments, your Razor markup might resemble something like this

<environment names="Development">            
    <script asp-src-include="~/app/**/*.js"></script>
</environment>
<environment names="Staging,Production">
    <script asp-src-include="~/app/**/*.min.js"></script>
</environment>

To make use of this feature, don't forget to include

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

in your *.cshtml or _Layout.cshtml.

Edit

Another option is using a module like gulp-npm-files which performs a similar task by copying all *.js files to designated folders. Feel free to check out the source code on GitHub if you want to create your own custom module.

However, this approach may not suit your needs entirely especially when dealing with directories containing numerous files. For instance, while working with 'angular2' (AngularJS 2.0), you might only require the compiled/minified versions located in 'angular2/bundles/' such as 'angular2.js', 'angular2.min.js', or 'angular.dev.js'.

In these cases, the dependency's package.json may not provide sufficient details on locating these specific files. This could mean manual copy tasks via gulp to organize dependencies and utilize asp-src-include for automated inclusion into your HTML files generated by razor.

Answer 2

If you're looking to simplify including multiple JavaScript files, there's a handy tag helper called asp-src-include at your disposal.

Picture a scenario where you have several *.js files that need to be included:

<script src="/app/app.js"></script>
<script src="/app/controller/controllerA.js"></script>
<script src="/app/controller/controllerB.js"></script>
<script src="/app/service/userservice.js"></script>

Instead of listing them individually, you can streamline the process with just one tag.

<script asp-src-include="~/app/**/*.js"></script>

When it comes to deploying for Production/Development environments, your Razor markup might resemble something like this

<environment names="Development">            
    <script asp-src-include="~/app/**/*.js"></script>
</environment>
<environment names="Staging,Production">
    <script asp-src-include="~/app/**/*.min.js"></script>
</environment>

To make use of this feature, don't forget to include

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

in your *.cshtml or _Layout.cshtml.

Edit

Another option is using a module like gulp-npm-files which performs a similar task by copying all *.js files to designated folders. Feel free to check out the source code on GitHub if you want to create your own custom module.

However, this approach may not suit your needs entirely especially when dealing with directories containing numerous files. For instance, while working with 'angular2' (AngularJS 2.0), you might only require the compiled/minified versions located in 'angular2/bundles/' such as 'angular2.js', 'angular2.min.js', or 'angular.dev.js'.

In these cases, the dependency's package.json may not provide sufficient details on locating these specific files. This could mean manual copy tasks via gulp to organize dependencies and utilize asp-src-include for automated inclusion into your HTML files generated by razor.

Answer 3

Answer №2

Are you looking for a way to automate the injection of scripts into your HTML code? Consider using the convenient Wiredep module.

If you need to transfer assets to a different folder, there are numerous modules available for copying or linking files between directories. One option you might explore is Gulp-copy.

Answer 4

Are you looking for a way to automate the injection of scripts into your HTML code? Consider using the convenient Wiredep module.

If you need to transfer assets to a different folder, there are numerous modules available for copying or linking files between directories. One option you might explore is Gulp-copy.

Reorganize external dependencies in the wwwroot directory using gulp

Answer №1

Answer №2

Similar questions

Automating a task on Raspberry Pi by setting up a cronjob to run a shell script that invokes an npm command instead of directly calling node

As a result of the Chrome 53 bug, the Yahoo Weather API encountered an insecure certificate causing the jQuery AJAX request to fail

How to transfer data using props through the ":to" attribute of a router link in Vue.js

Guide on setting up a Redirect URL with React Router

Using the value from the Vuex state to set the initial value for a different parameter

Ensuring secure communication with PHP web service functions using Ajax jQuery, implementing authentication measures

Obtaining asynchronous data with nodejs is possible through several methods

When developing libraries in webpack, which dependencies should be considered as peer dependencies?

Using AJAX to set a session variable in PHP

The values are not being properly initialized in the componentDidMount() function

Removing characters from a string with regular expressions

Populating Hidden Form Fields with Dynamic Identifiers

The persistent redirection issue in Node.js - Middleware

AngularJS selection controls: checkbox and dropdown menus

Pressing the submit button in the Material UI table clears all selected checkboxes

Is it possible to line up Ajax request in Javascript?

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

Trouble connecting JavaScript to Node application for proper functionality

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

The map function is selectively applied to certain expressions, not all