npm - ASP.Net Core 2.1:如何将 Gulp 与 npm 一起用于项目依赖项
问题描述
现在Bower
ASP.Net Core 2.0 已经死了,我需要找到一种同样有效的方法来从 npm 缩小/注入我的依赖项。
我安装gulp
并使用npm
,我将所有依赖项更新到node_modules
项目根目录中的文件夹中。下一步是将我的package.json
文件中列出的所有依赖项注入到wwwroot
我的项目文件夹中。
我正在阅读 Shawn Wildermuth 的教程:https ://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower和他的“更好的解决方案”需要依赖要在文件中列出的Gulp
目录:
// Dependency Dirs
var deps = {
"jquery": {
"dist/*": ""
},
"bootstrap": {
"dist/**/*": ""
},
};
然后创建一个任务,遍历这些目录:
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);
});
这可以在不列出Gulp
文件中所有依赖目录的情况下完成吗?相反,扫描package.json
文件以将特定文件从node_modules
文件夹传送到wwwroot
?
这是我的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"
}
}
这是我的其余部分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"]);
我已经看到了一些解决方案,它们只是从node_modules
文件夹中获取所有内容,但这将是一个巨大的(不必要的)上传到服务器的东西,我不会这样做。
有什么帮助吗?
解决方案
推荐阅读
- r - 如何从几个桶中获取所有单词组合?
- docker - 为多个 go.mod 项目编写 dockerfile
- android - DownloadManager 下载完成,但文件存储了两次。为什么?
- r - 使用 lsfit() 将 PC 与数据进行比较
- java - 不推荐使用方法 tcpClient.bootstrap() 的 WebClient 日志记录
- c# - 如何在 WPF 中为 XAML 岛使用正确的 WindowsRuntime.dll?
- pandas - 数据分析熊猫
- css - Bootstrap 4在单选按钮下方对齐标签
- android - 如何将图像从一项活动发送到从图库中获取的另一项活动?
- javascript - 表大小不应在第一次初始加载后调整大小