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?