asp.net-core
Объединение и минимизация

Грунт и глоток

В приложениях ASP.NET Core вы объединяете и минимизируете клиентские ресурсы во время разработки с использованием сторонних инструментов, таких как Gulp и Grunt . Используя компоновку времени и минимизацию, мини-файлы создаются до развертывания приложения. Преимущество сокращения и минимизации перед развертыванием обеспечивает снижение нагрузки на сервер. Тем не менее, важно признать, что компоновка и минимизация времени разработки увеличивает сложность сборки и работает только со статическими файлами.

Это делается в ASP.NET Core, настраивая Gulp через файл gulpfile.js в вашем проекте:

// Defining dependencies
var gulp = require("gulp"),  
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

// Define web root
var webroot = "./wwwroot/"

// Defining paths
var paths = {  
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

// Bundling (via concat()) and minifying (via uglify()) Javascript
gulp.task("min:js", function () {  
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

// Bundling (via concat()) and minifying (via cssmin()) Javascript
gulp.task("min:css", function () {  
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

Этот подход будет правильно связывать и минимизировать ваши существующие файлы Javascript и CSS соответственно соответственно каталогам и шаблонам глобусов, которые используются.

Расширение Bundler и Minifier

Visual Studio также имеет доступный Bundler и Minifier Extension, который способен обрабатывать этот процесс для вас. Расширение позволяет вам легко выбирать и связывать нужные файлы, не набирая строку кода.

Создание ваших связок

После установки расширения вы выбираете все конкретные файлы, которые хотите включить в комплект, и используйте параметр Bundle and Minify Files из расширения:

Это позволит вам назвать ваш комплект и выбрать место для его сохранения. Затем вы увидите новый файл в вашем проекте под названием bundleconfig.json который выглядит следующим образом:

[
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" 
    ]
  }
]

ПРИМЕЧАНИЕ . Порядок выбора файлов определяет порядок, в котором они отображаются внутри пакета, поэтому, если у вас есть какие-либо зависимости, убедитесь, что вы учитываете это.

Минимизация ваших пакетов

Теперь предыдущий шаг просто свяжет ваши файлы, если вы хотите минимизировать пакет, тогда вам нужно указать, что в файле bundleconfig.json. Просто добавьте minify блок как следующий к существующей связке , чтобы указать , что вы хотите его уменьшенным:

[
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" 
    ],
    "minify": {
      "enabled": true
    }
  }
]

Автоматизация ваших пакетов

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

Для этого вам необходимо сделать следующее:

• Откройте проводник запуска задач (с помощью инструментов> Проводник запуска задач).
• Щелкните правой кнопкой мыши параметр «Обновить все файлы» ниже bundleconfig.json .
• Выберите предпочтительное связывание в контекстном меню Bindings.

После этого ваши пакеты должны быть автоматически обновлены с предпочтительным шагом, который вы выбрали.

Команда расслоения dotnet

В выпуске ASP.NET Core RTM появился BundlerMinifier.Core , новый инструмент BundlerMinifier.Core , который можно легко интегрировать в существующие приложения ASP.NET Core и не требует каких-либо внешних расширений или файлов сценариев.

Использование BundlerMinifier.Core

Чтобы использовать этот инструмент, просто добавьте ссылку на BundlerMinifier.Core в разделе tools вашего существующего файла project.json как показано ниже:

"tools": {
  "BundlerMinifier.Core": "2.0.238",
  "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
  "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
}

Настройка ваших пакетов

После добавления инструмента вам необходимо добавить файл bundleconfig.json в проект, который будет использоваться для настройки файлов, которые вы хотите включить в свои пакеты. Ниже приведена минимальная конфигурация:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/semantic.validation.min.js",
    "inputFiles": [
      "wwwroot/js/semantic.validation.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

Создание / обновление пакетов

После того, как ваши пакеты были настроены, вы можете связать и минимизировать существующие файлы с помощью следующей команды:

dotnet bundle

Автоматическое объединение

Процесс Bundling and Minification может быть автоматизирован как часть процесса сборки, добавив команду dotnet bundle в раздел dotnet bundle существующего файла project.json :

"scripts": {
  "precompile": [
    "dotnet bundle"
  ]
}

Доступные команды

Вы можете увидеть список всех доступных команд и их описаний ниже:

• dotnet bundle - Выполняет команду bundle с bundleconfig.json файла bundleconfig.json для bundleconfig.json и bundleconfig.json указанных файлов.
• dotnet bundle clean - очищает все существующие выходные файлы с диска.
• dotnet bundle watch - создает наблюдателей, которые будут автоматически запускать dotnet bundle всякий раз, когда существующий входной файл из конфигурации bundleconfig.json связывает ваши файлы.
• dotnet bundle help - отображает все доступные варианты справки и инструкции по использованию интерфейса командной строки.