Я считаю, что система минимизации по умолчанию несколько ограничена, и для таких вещей, как исключение файлов, я обычно использую вместо этого средство запуска задач, например Gulp .
Итак, как сделать то, что вы хотите, используя 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.
- 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");
Как вы можете сделать вывод из названия, плагин 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 Core: https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.0