How to use npm with ASP.NET Core

by

By publishing your whole node_modules folder you are deploying far more files than you will actually need in production.

Instead, use a task runner as part of your build process to package up those files you require, and deploy them to your wwwroot folder. This will also allow you to concat and minify your assets at the same time, rather than having to serve each individual library separately.

You can then also completely remove the FileServer configuration and rely on UseStaticFiles instead.

Currently, gulp is the VS task runner of choice. Add a gulpfile.js to the root of your project, and configure it to process your static files on publish.

For example, you can add the following scripts section to your project.json:

 "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  },

Which would work with the following gulpfile (the default when scaffolding with yo):

/// <binding Clean='clean'/>
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

More Related Contents:

  1. How do I get the contents of a JSON file I added in the StartUp method to use it in one of my actions?
  2. @Html.Action in Asp.Net Core
  3. MVC/JQuery validation does not accept comma as decimal separator
  4. Mock HttpContext for unit testing a .NET core MVC controller?
  5. How to create roles in ASP.NET Core and assign them to users?
  6. Can Razor Class Library pack static files (js, css etc) too?
  7. Where are the ControllerContext and ViewEngines properties in MVC 6 Controller?
  8. How to know the selected checkboxes from within the HttpPost Create action method?
  9. How to implement Permission Based Access Control with Asp.Net Core
  10. How do I setup multiple auth schemes in ASP.NET Core 2.0?
  11. Where is Request.IsAjaxRequest() in Asp.Net Core MVC?
  12. TempData null in asp.net core
  13. Avoid or control circular references in Entity Framework Core
  14. ASP.NET Core middleware vs filters
  15. Multiple Authorization attributes on method
  16. How to use SqlClient in ASP.NET Core?
  17. AddIdentity vs AddIdentityCore
  18. Dealing with large file uploads on ASP.NET Core 1.0
  19. How do I transform appsettings.json in a .NET Core MVC project?
  20. An error occurred attempting to determine the process id of dotnet.exe which is hosting your application. One or more error occured
  21. Unable to resolve service for type ‘Microsoft.AspNetCore.Identity.UserManager` while attempting to activate ‘AuthController’
  22. ASP.NET MVC – Attaching an entity of type ‘MODELNAME’ failed because another entity of the same type already has the same primary key value
  23. How to get the current user in ASP.NET MVC
  24. Why can’t I use System.IO.File methods in an MVC controller?
  25. Get Current Area Name in View or Controller
  26. How to to return an image with Web API Get method
  27. .NET Core and System.Drawing
  28. Update multiple records at once in asp.net mvc
  29. Replace service registration in ASP.NET Core built-in DI container?
  30. How to convert a file into byte array in memory?

Leave a Comment