Как остановить ASP.NET Core 2.0 MVC minification от изменения определенного файла?

Я выполняю Bundling и Minification в 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 теряет свой конечный символ новой строки, когда он трансформируется этим процессом связывания/минимизации, что делает ожидаемый хэш файла более несовместимым. В качестве обходного пути я могу указать 2 хэша для значения целостности для поддержки файла с или без новой строки:

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

Но это менее эффективно, чем просто следить за тем, чтобы минимизация не касалась этого файла. Как я могу остановить эту новую строку от обрезки?

ОТВЕТЫ

Ответ 1

Я считаю, что стандартная система миниатюр несколько ограничена, и для таких вещей, как исключение файлов, я обычно использую вместо этого задачу, например, Gulp.

Итак, вот как сделать то, что вы хотите, используя глоток:

Добавление поддержки npm

Сначала добавьте поддержку пакетов npm, добавив файл package.json, если у вас его еще нет, внутри проводника решений щелкните правой кнопкой мыши имя вашего проекта, затем добавьте новый элемент и найдите файл конфигурации 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 (эта папка не отображается, если вы не активируете "Показать все файлы" на панели инструментов Solution Explorer.

Эта папка содержит все библиотеки и их зависимости, мы будем использовать gulp для копирования библиотек, которые вы хотите включить, из node_modules в вашу папку wwwroot.

Настройка Gulp

  • Создайте еще две папки в корне вашего проекта, назовите один стили и другие скрипты.

Вы можете использовать эти папки для своих сценариев приложений и стилей, мы будем использовать gulp для объединения, минимизации и копирования в папку wwwroot всех этих ресурсов.

Идея состоит в том, чтобы избежать использования папки wwwroot напрямую, чтобы вы полностью контролировали то, что вы раскрываете, и как публиковать свой сайт.

  • Добавьте файл javascript в корень вашего проекта и назовите его gulpfile.js

Вы можете использовать gulp для создания различных задач, которые могут выполняться автоматически до или после сборки, при очистке проекта, когда проект открыт в Visual Studio и т.д....

В этом примере я создам следующие задачи:

  • clean: js, чтобы очистить все файлы в папке wwwroot/js.
  • clean: css, чтобы очистить все файлы css в вашей папке wwwroot/css.
  • очистить для очистки: js и очистить: css один за другим.
  • следить за изменениями в вашем приложении и файлах стилей, поэтому всякий раз, когда вы их сохраняете, ресурсы регенерируются в wwwroot.
  • dev: js для генерации ресурсов JavaScript javascript во время разработки.
  • dev: css для генерации ресурсов wwwroot css во время разработки.
  • dev для выполнения dev: js и dev: css один за другим.
  • min: js для генерации ресурсов ресурса wwwroot во время производства.
  • min: css для генерации ресурсов wwwroot css во время производства.
  • мин для выполнения 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 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

Вы можете запускать задачи, дважды щелкнув их.

Вы можете использовать сгенерированные ресурсы в виде бритвы, например:

<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, см. Здесь пример.

Дополнительная информация об использовании Gulp в ядре ASP.NET: https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.0

Ответ 2

Попробуйте следующую конфигурацию:

//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 здесь