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

Question

我正在执行 Bundling and Minification in 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>

在我的 bundleconfig.json 中有以下部分：

{
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
        "node_modules/jquery/dist/jquery.min.js"
    ],
    "minify": {
        "enabled": false
    }
}

问题是 ~/js/jquery.min.js 文件在通过此 bundling/minification 过程转换时丢失了尾随的换行符这使得文件的预期散列不再匹配。作为一种解决方法，我可以为完整性值指定 2 个哈希值以支持带有或不带有换行符的文件，如下所示：

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

但这比仅确保缩小不触及此文件效率低。我怎样才能阻止这个换行符被修剪？

Answer 1

尝试使用以下配置：

//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 缩小器 here

的可用设置

Answer 2

我发现默认的缩小系统有些受限，对于排除文件之类的事情，我通常最终会使用运行ner 之类的 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 的文件夹（除非您在解决方案资源管理器工具栏上激活 "Show all files"，否则此文件夹不可见。

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

正在设置Gulp

在项目的根目录中创建另外两个文件夹，一个命名为 Styles，另一个命名为 Scripts.

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

我们的想法是避免直接使用 wwwroot 文件夹，这样您就可以完全控制公开的内容以及发布网站的方式。

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

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

对于这个例子，我将创建以下任务：

clean:js 清除 wwwroot/js 文件夹中的所有文件。
clean:css 清除 wwwroot/css 文件夹中的所有 css 文件。
清理到运行clean:js和clean:css一个接一个
watch 以监视您的应用程序和样式sheet 文件中的更改，因此每当您保存它们时，资源都会在 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");

正如您可以从名称中推断的那样，gulp-filter 插件是我们用来从缩小过程中排除文件的插件。

现在，您需要设置一些通用路径：

var paths = {
    webroot: "./wwwroot/",
    scripts: "./Scripts/",
    styles: "./Styles/",
    node_modules: "./node_modules/"
};

//The following paths will be used to look for any js and css file in your Script and Styles folder or any subfolder inside them 
paths.scripts = paths.scripts + "**/*.js";
paths.styles = paths.styles + "**/*.css";

注意：如果您需要指定这些文件夹中任何脚本的顺序，您可以按如下方式进行：

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"];

我们的想法是避免缩小 paths.minVendorJs 中指定的任何文件，因为它们已经缩小了。如果需要，以下路径将允许您缩小任何特定的供应商文件：

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

然后，我们定义将生成的输出文件，对于此示例，将只生成一个脚本和一种样式-sheet，其中包含所有应用程序文件以及合并在其中的所有供应商文件他们：

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 文件和 select Task Runner Explorer。如果一切正常，您应该会看到如下内容：

您可以运行双击任务。

您可以像这样在剃刀视图中使用生成的资源：

<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>

如果您需要编译 LESS 或 SASS 文件，您需要使用相应的 Gulp 插件，请参阅 here 示例。

有关在 ASP.NET 核心中使用 Gulp 的更多信息：https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.0

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

How can I stop ASP.NET Core 2.0 MVC minification from modifying a specific file?

javascript

visual-studio

bundling-and-minification

asp.net-core

asp.net-core-2.0