Javascript 如何阻止ASP.NET Core 2.0 MVC缩小修改特定文件？

我在表演，我遇到了一个问题，缩小发生在不应该发生的时候。在我的页面中，我有以下脚本标记：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous"
        asp-fallback-test="window.jQuery"
        asp-fallback-src="~/js/jquery.min.js">
</script>

问题是，~/js/jquery.min.js文件在通过此绑定/缩小过程进行转换时正在丢失其尾部换行符，这使得文件的预期哈希不再匹配。作为一种解决方法，我可以为完整性值指定2个哈希值，以支持包含或不包含换行符的文件，如下所示：

integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT sha384-I7/UTpkJas2maMjJpGmrvEgQecqO8Dta/9Wwh+cQrH6Jj984WRRFhWg4MV/oTkIW"

---

但这比确保缩小不触及此文件的效率要低。如何阻止修剪此换行符？

尝试以下配置：

//1. by default outputMode is singleLine which removes new lines and output on a single line. We are setting it to none.
{
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
        "node_modules/jquery/dist/jquery.min.js"
     ],
     "minify": {
           "enabled": false,
            outputMode: "none"         
      }
}


//Alternatively, outputMode = "multipleLines" should work with a indentSize of 0 as well.
//In this mode , output file has each line indented by specified indentSize
{
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
        "node_modules/jquery/dist/jquery.min.js"
     ],
      "minify": {
       "enabled": false,
        outputMode: "multipleLines",
         indentSize: 0
    }
}

---

您可以阅读有关javascript缩略器可用设置的信息

我发现默认的缩略系统有些有限，对于排除文件之类的事情，我通常使用任务运行程序，如Gulp

下面是如何使用gulp实现您想要的功能：

添加npm支持

首先通过添加package.json文件来添加对npm包的支持，如果您还没有该文件，请在解决方案资源管理器中，右键单击项目名称，然后添加新项并搜索npm配置文件

在package.json内部添加以下必需的gulp依赖项以及您想要使用的任何其他客户端库，例如jquery、bootstrap等：

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "gulp-cssmin": "0.2.0",
    "gulp-uglify": "3.0.0",
    "gulp-filter": "5.1.0",
    "gulp-watch": "5.0.0",
    "rimraf": "2.6.2",
    "jquery": "3.3.1",
    "bootstrap": "4.1.1",
    "popper.js": "1.14.3"
  }
}

保存文件后，一个名为node_modules的文件夹将添加到项目目录中（除非在解决方案资源管理器工具栏上激活“显示所有文件”，否则此文件夹不可见）

此文件夹包含所有库及其依赖项，我们将使用gulp将要包含的库从node_模块复制到wwwroot文件夹

设置大口喝法

• 在项目的根目录中创建另外两个文件夹，分别命名为样式和脚本

您可以将这些文件夹用于应用程序脚本和样式表，我们将使用gulp合并、缩小并复制到wwwroot文件夹中所有这些资源

这样做的目的是避免直接使用wwwroot文件夹，这样您就可以完全控制发布内容以及发布网站的方式

• 将javascript文件添加到项目的根目录中，并将其命名为gulpfile.js

您可以使用gulp创建不同的任务，这些任务可以在生成之前或之后、清理项目时、在Visual Studio中打开项目时自动执行

对于本例，我将创建以下任务：

• clean:js清除wwwroot/js文件夹中的所有文件
• clean:css清除wwwroot/css文件夹中的所有css文件
• clean依次运行clean:js和clean:css
• 监视监视应用程序和样式表文件中的更改，以便在保存它们时，在wwwroot中重新生成资源
• dev:js在开发过程中生成wwwroot javascript资源
• dev:css在开发期间生成wwwroot css资源
• dev依次执行dev:js和dev:css
• min:js在生产过程中生成wwwroot javascript资源
• min:css在生产过程中生成wwwroot css资源
• min依次执行min:js和min:css

Gulp有很多插件，您需要指定项目需要哪些插件，为此，请在脚本开头添加以下内容：

/// <binding BeforeBuild='clean, dev, min' Clean='clean' ProjectOpened='watch' />
"use strict";

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

注意：如果需要指定这些文件夹中任何脚本的顺序，可以执行以下操作：

paths.scripts = [paths.scripts + "/somescript.js", paths.scripts + "**/*.js"];
paths.styles = [paths.styles + "/somecss.css", paths.styles + "**/*.css"];

接下来，定义node_modules文件夹中供应商脚本的路径：

paths.vendorJs = [paths.node_modules + "jquery/dist/jquery.js", 
        paths.node_modules + "popper.js/dist/umd/popper.js",
            paths.node_modules + "bootstrap/dist/js/bootstrap.js"];

paths.vendorCss = [paths.node_modules + "bootstrap/dist/css/bootstrap.css"];

paths.minVendorJs = [paths.node_modules + "jquery/dist/jquery.min.js", 
    paths.node_modules + "jquery/dist/umd/popper.min.js", 
      paths.node_modules + "bootstrap/dist/js/bootstrap.min.js"];

paths.minVendorCss = [paths.node_modules + "bootstrap/dist/css/bootstrap.min.css"];

这样做的目的是避免缩小

path.minVendorJs

中指定的任何文件，因为它们已经缩小。如果需要，以下路径将允许您缩小任何特定的供应商文件：

paths.vendorCssToMinify = [paths.node_modules + "perfect-scrollbar/css/perfect-scrollbar.css"]

然后，我们定义将生成的输出文件，例如，只生成一个脚本和一个样式表，其中包含所有应用程序文件以及其中组合的所有供应商文件：

paths.concatJsDest = paths.webroot + "js/application.js";
paths.concatCssDest = paths.webroot + "css/application.css";

paths.minConcatJsDest = paths.webroot + "js/application.min.js";
paths.minConcatCssDest = paths.webroot + "css/application.min.css";

最后，我们定义每个任务：

gulp.task("clean:js", function (cb) {
    rimraf(paths.webroot + "js/**/*.js", cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.webroot + "css/**/*.css", cb);
});

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

gulp.task('watch', function () {
    gulp.watch(paths.styles, ['dev:css', 'clean:css']);
    gulp.watch(paths.scripts, ['dev:js', 'clean:js', ]);
});

gulp.task("dev:js", function () {
    return gulp.src(paths.vendorJs.concat(paths.scripts))
        .pipe(concat(paths.concatJsDest))
        .pipe(gulp.dest('.'));
});

gulp.task("dev:css", function () {
    return gulp.src(paths.vendorCss.concat(paths.styles))
        .pipe(concat(paths.concatCssDest))
        .pipe(gulp.dest('.'));
});

gulp.task("min:js", function () {
    // Files to skip from minification.
    var filter = gulpFilter(paths.minVendorJs, {
        restore: true
    });

    return gulp.src(paths.minVendorJs.concat(paths.scripts))
        .pipe(filter)
        .pipe(uglify())
        .pipe(filter.restore)
        .pipe(concat(paths.minConcatJsDest))
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    // Files to skip from minification.
    var filter = gulpFilter(paths.minVendorCss, {
        restore: true
    });
    return gulp.src(paths.minVendorCss.concat(paths.vendorCssToMinify).concat(paths.styles))
        .pipe(filter)
        .pipe(cssmin())
        .pipe(filter.restore)
        .pipe(concat(paths.minConcatCssDest))
        .pipe(gulp.dest("."));
});

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

就这样

要测试配置，请右键单击您的gulpfile.js文件，然后选择任务运行器资源管理器。如果一切正常，您将看到如下内容：

<environment include="Development">
    <link rel="stylesheet" href="~/css/application.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/css/application.min.css" />
</environment>

您可以通过双击任务来运行这些任务

您可以在razor视图中使用生成的资源，如下所示：

<environment include="Development">
    <link rel="stylesheet" href="~/css/application.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/css/application.min.css" />
</environment>

及

如果您需要编译更少或SASS文件，则需要使用相应的Gulp插件，请参见示例

---

有关在ASP.NET Core中使用Gulp的更多信息：

为了澄清，node_modules/jquery/dist目录中的jquery.min.js文件包含3行，但在wwwroot/js目录中，它错误地只包含2行。ASP.NET Core 2.1-rc1仍然存在这种情况。这是Visual Studio缩小过程中的一个错误吗？是否应该“enabled”：false不是完全禁用缩小功能以便不修改此文件吗？“enabled”：false与任何其他选项一起提供2行输出。使用“enabled”：true，“outputMode”：“none”提供2行输出，“outputMode”：“singleLine”提供2行输出，“outputMode”：“multipleline”（有和没有indentSize 0）提供4115行的输出。这些选项似乎都没有提供3行的所需输出。

<environment include="Development">
    <link rel="stylesheet" href="~/css/application.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/css/application.min.css" />
</environment>

<environment include="Development">
    <script src="~/js/application.js"></script>
</environment>
<environment exclude="Development">
    <script src="~/js/application.min.js"></script>
</environment>