CODEWITHSUNDEEP
javascriptbuildnpmgulpasp.net-core
Pascal
Pascal

Reputation: 12855

Move external libraries to wwwroot folder with gulp

I am using VS 2015 + ASP.net vnext + Angular 2 + Typescript + gulp.js. I have automated my scripts/**/*.ts files moving to the wwwroot/app folder. Now I want to do the same for my libraries like Angular 2. I want that a gulp process injects

Of course I want that this to happen for all my libs automatically, without having knowledge about a library:

The minification of any.js can be done by me.

Actually I would just have to regard all dependencies in package.json... but then I am lost.

Can my idea be done or does there maybe already exist a tool? Or should the workflow broken into more manual steps like I have to copy/paste a certain library?

Or is it possible to take the dependencies name and concat it with .js then search this file under the node_modules folder... (kind of hacky and not safe...)

UPDATE

Rephrase/Refine my question:

How can I automatically add my npm dependencies (not devDependencies) to the environment "Development" node when triggering a certain event like build/clear/etc...

Upvotes: 2

Views: 1609

Answers (2)

Tseng
Tseng

Reputation: 64170

There is a little tag helper for this, called asp-src-include.

Imagine the case where you have a handful of *.js files you want to include:

<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>

etc. You can include all of these with a single `´ tag.

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

So for Production/Development deployment your Razor markup may look like 

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

For this you need the @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" (starting with RC1 or RC2 it's ' @addTagHelper *, Microsoft.AspNet.Mvc.TagHelpers' - without the double-quotes ) declaration in your *.cshtml files or inside your _Layout.cshtml.

edit

There is an module called gulp-npm-files that does something similar, it copies all *.js files into the target folders. You can see it's source on GitHub in case you want write your own module to extend the functionality.

But that may not be exactly what you want, as the folders often contain multiple files, for example angular2 (AngularJS 2.0) contains dozen of files (*.js and *.ts), but you're mostly only interested in the compiled/minified ones, found in angular2/bundles/* like angular2.js, angular2.min.js or angular.dev.js.

The package.json of the particular dependency provides no information on where to find this compiled files. So I guess, there's no way to automate this unless you want to copy all of the files to wwwroot which makes no sense in my eyes, especially if you want to use asp-src-include, as it makes no difference on what it includes, so you want to minimize the number of *.js files in your wwwroot folder.

I guess the best you can do is to manually copy the dependencies via gulp task and then use asp-src-include to automatically include them into your razor generated html files.

Upvotes: 3

Arnold Stoba
Arnold Stoba

Reputation: 343

So your problem is that you want to inject the scripts automatically into your HTML, right? You can use the Wiredep module for that.

And for copying the assets to an other folder, there are many modules to copy or link files from one folder to another. Gulp-copy is the first one i could find.

Upvotes: 0

Related Questions