ASP.Net Core 2.1: How to use Gulp with npm for project dependencies

问题

Now that Bower is dead with ASP.Net Core 2.0, I need to find an equally effective way to minify/inject my dependencies from npm.

I installed gulp, and using npm, I'm updating all my dependencies into the node_modules folder in the root of my project. The next step is getting all the dependencies listed in my package.json file to be injected into the wwwroot folder of my project.

I was going along Shawn Wildermuth's tutorial: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower and his "Better Solution" requires the dependency directories to be listed in the Gulp file:

// Dependency Dirs
var deps = {
    "jquery": {
        "dist/*": ""
    },
    "bootstrap": {
        "dist/**/*": ""
    },
};

Then creating a task, to iterate through these directories:

gulp.task("scripts", function () {
    var streams = [];

    for (var prop in deps) {
        console.log("Prepping Scripts for: " + prop);
        for (var itemProp in deps[prop]) {
            streams.push(gulp.src("node_modules/" + prop + "/" + itemProp)
                .pipe(gulp.dest("wwwroot/vendor/" + prop + "/" + deps[prop][itemProp])));
        }
    }

    return merge(streams);
});

Can this be done without listing all of the dependency directories in the Gulp file? And instead, scan the package.json file to carry specific files from the node_modules folder to the wwwroot?

Here's my package.json:

{
    "version": "1.0.0",
    "name": "asp.net",
    "dependencies": {
        "jquery": "3.3.1",
        "bootstrap": "4.1.1"
    },
    "devDependencies": {
        "gulp": "3.9.1",
        "gulp-concat": "2.6.1",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "2.0.1",
        "rimraf": "2.6.1"
    }
}

And here's the rest of my gulpfile.js:

/// <binding BeforeBuild='clean, min, scripts' Clean='clean' />
"use strict";

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

var paths = {
    webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.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"]);

I've seen some solutions out there that simply take everything from the node_modules folder, but this would be a giant (unnecessary) upload to the server, something I wouldn't do.

Any help?

来源：https://stackoverflow.com/questions/51050816/asp-net-core-2-1-how-to-use-gulp-with-npm-for-project-dependencies