У меня есть Durandal 2 приложение основанное на ASP.NET MVC 5 и Web API, начинающегося с Index.cshtml (на HomeController), обслуживаемых через маршрутизатор MVC. С этого момента все регулярные html-представления обрабатываются маршрутизатором Durandal.Пакетирование и конкатенация с глотком-useref Дюрандала и ASP.NET MVC
В любом случае, я пытаюсь использовать gulp-useref, чтобы объединить все файлы css и js. У меня все работает, и gulp-useref сбрасывает новые конкатенированные файлы и index.cshtml с обновленными ссылками на скрипты и таблицы стилей в папке dist.
Конечно, для приложения на работу мне необходимо обновить index.cshtml еще в Views/Home/. Я создал задачу «копировать» с gulp, которая делает именно это; он перезаписывает оригинал index.cshtml и фиксирует пути к связанным файлам js и css.
Это тоже работает, но поскольку useref удаляет комментарии html, которые отмечают место, где он должен вставлять ссылки на объединенные файлы, процесс не повторяется.
Позвольте мне проиллюстрировать некоторым кодом.
В моей Index.cshtml у меня есть:
<html>
<head></head>
<body>
<!-- build:js js/lib.js-->
<script src="/bower_components/numeral/languages.js"></script>
<script src="/scripts/bootstrap.js"></script>
<script src="/scripts/typeahead.js"></script>
<script src="/scripts/knockout-bootstrap.js"></script>
<script src="/scripts/knockout-extenders.js"></script>
<!-- endbuild -->
</body>
</html>
Это где gulp-useref разместит обновленную ссылку скрипт, так что в конечном итоге выглядит так:
<html>
<head></head>
<body>
<script src="/js/lib.js"></script>
</body>
</html>
Как вы можете видеть, useref удаляет комментарии html, поэтому, если я перезапишу исходный файл index.cshtml с этим файлом, useref не будет знать, где разместить обновленный тег сценария. И если я не перезаписал оригинал index.cshtml, приложение не будет использовать конкатенированные файлы.
Я новичок в gulp, так что я мог бы идти на это совершенно неправильно, но как я могу убедиться, что мой /Views/Home/index.cshtml использует объединённые файлы в автоматическом режиме?
Или, альтернативно, есть ли лучший подход к тому, что я пытаюсь сделать, а именно, чтобы все было готово к развертыванию?
Вот мои соответствующие gulp задачи, для справки:
gulp.task("optimize-for-deployment", function() {
var assets = $.useref.assets({ searchPath: "./" });
var cssFilter = $.filter("**/*.css");
var jsFilter = $.filter("**/*.js");
return gulp
.src(config.index)
.pipe($.plumber())
.pipe(assets)
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest(config.appDist));
});
// copy the updated index.cshtml to Views/Home/
gulp.task("copy-for-deployment", ["optimize-for-deployment"], function() {
return gulp.src(config.appDist + "index.cshtml")
.pipe($.replacePath(/js\/lib.js/, "/app/dist/js/lib.js"))
.pipe($.replacePath(/style\/app.css/, "/app/dist/style/app.css"))
.pipe(gulp.dest(config.indexLocation));
});
Как вы переключаетесь между отладкой и выпуском в этом случае? Если бы кто-то использовал этот подход? – eugenekgn