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

Question

我在ASP.NET Core 2.0 MVC中执行Bundling和Minification,但是当它不应该发生缩小时我遇到了一个问题.在我的页面中,我有以下脚本标记:

<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文件在通过此捆绑/缩小过程转换时丢失其尾随换行符,这使得文件的预期散列不再匹配.作为一种解决方法,我可以为完整性值指定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 minifier的可用设置

Answer 2

我发现默认的缩小系统有些限制，对于排除文件之类的事情，我通常最终会使用像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_modules 复制到 wwwroot 文件夹。

设置 Gulp

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

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

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

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

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

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

• clean:js清除 wwwroot/js 文件夹中的所有文件。
• clean:css清除 wwwroot/css 文件夹中的所有 css 文件。
• clean依次运行 clean:js 和 clean:css 。
• watch监视应用程序和样式表文件中的更改，因此每当您保存它们时，资源都会在 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"]

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

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文件并选择Task Runner Explorer。如果一切顺利，您应该看到如下内容：

您可以通过双击任务来运行它们。

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

<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 插件，请参阅此处的示例。

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