Предлагает ли Web Essentials способ использовать связанный файл js в производстве, но отдельные файлы js в разработке?

Настройка:

У меня есть большое приложение SPA, использующее множество файлов JavaScript, которые объединены с использованием Web Essentials объединение в Visual Studio 2013. Затем я включаю уменьшенные файлы js, созданные Web Essentials, на мою страницу HTML. Это приложение не использует ASP.NET

Эта проблема:

Я хотел бы иметь возможность распространять страницу HTML с одним минифицированным скриптом, на который ссылаются для производства, но с отдельными неминифицированными скриптами для разработки.

Причины:

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

Текущее решение:

У меня есть задача ворчания, которая входит в мой html-файл и изменяет его таким образом, что заменяются теги <script>. У этого есть недостаток, который растет с каждым файлом, который я добавляю на страницу.

Предлагает ли Web Essentials лучшее решение, чем то, что я делаю сейчас, что я, возможно, просто упустил из виду?


javascript visual-studio bundling-and-minification web-essentials
person codetoast    schedule 11.05.2015    source источник
comment
Если вы говорите о функции asp.net ScriptBundling, включение / выключение режима отладки в вашем web.config повлияет на объединение скриптов. Вы также можете явно использовать System.Web.Optimization.EnableOptimizations = true / false в своем методе RegisterBundles.   -  person Ji_in_coding    schedule 09.07.2015
comment
К сожалению, я не использую объединение ASP.net. В качестве обновления моего текущего решения я полностью перешел на ОС и использовал browserify для управления тем, какие js-файлы будут минифицированы и включены на мою страницу. Это дает мне необходимую гибкость для настройки отладки и выпуска.   -  person codetoast    schedule 11.07.2015

Ответы (3)


arrow_upward
0
arrow_downward

Я только что использовал Bundler / Minifier отсюда: https://github.com/madskristensen/BundlerMinifier

Чтобы помочь увидеть несвязанные и неминифицированные JS и CSS, я создал помощник для рендеринга обоих в зависимости от того, запущено ли веб-приложение с включенной отладкой.

см. https://bundlerminifierhelper.codeplex.com/

Пример:

@Html.Bundle("/Content/Styles/Site.min.css")
@Html.Bundle("/Scripts/Scripts.min.js")

Примечание. Использование относительных путей, включая косую черту (/)

При отладке все входные файлы будут отображаться на странице, а когда не выполняется отладка, будет отображен предоставленный путь.

person Mark Redman    schedule 19.11.2015
comment
Это отличный инструмент. Спасибо Мэдсу и Марку за указание на это. К сожалению, для нашего проекта это вышло слишком поздно, однако для всех, кто находится в той же лодке, это хороший вариант. Я также хочу отметить, что Task Runner Explorer, также Mads, вместе с gulp и различными инструментами предоставили адекватное решение для нашего продукта, которое до сих пор работает хорошо. - person codetoast; 20.11.2015

arrow_upward
3
arrow_downward

Вы смешиваете инструмент связывания с эталонной реализацией.

Web Essentials 2013 создает пакеты сжатого (минимизированного) JavaScript, CSS, LESS, SASS и файлы изображений. Web Essentials должен создавать минифицированный пакет независимо от того, находитесь ли вы в режиме отладки.

Вы ищете способ выборочно ссылаться на уменьшенные файлы в режиме Release и на оригиналы в Debug. Это может означать довольно сложное кодирование Razor для проверки версии выпуска и обработки справочных вызовов.

Лучшим решением является использование объединения и минификации ASP.NET .

Отладить ваш JavaScript в среде разработки (где элемент компиляции в файле Web.config установлен на debug = "true") легко, потому что файлы JavaScript не объединяются и не уменьшаются, когда debug = "true"

Уменьшенный пакет будет по-прежнему существовать, если debug="true" в вашем Web.config. Но во время выполнения платформа будет ссылаться на исходные файлы, а не на уменьшенные. Ваш Web.config теперь отвечает за поддержку того, на какую версию ваших ресурсов ссылаются.

Пакеты Web Essential - это пассивные ресурсы. В Web Essentials нет функции, позволяющей различать режимы выпуска и отладки, поскольку это действие во время выполнения.

Примечание. Web Essentials 2015.0 удалил объединение и минификацию.

Важный!

Web Essentials 2015 больше не содержит функций для объединения и минимизации файлов JS, CSS и HTML, а также для компиляции файлов LESS, Scss и CoffeeScript. Эти функции были перемещены в отдельные расширения, что значительно улучшает их.

Обычной практикой является использование ASP.NET Bundler. Это еще одна причина отказаться от использования Web Essentials.

person Dave Alperovich    schedule 15.07.2015
comment
Спасибо за отличный ответ. Особенно полезным было обновление Web Essentials 2015. Ни бритва, ни сборщик ASP.NET не работают для моего проекта, поскольку я не использую ASP.NET. Его простые старые html-страницы с простыми старыми ссылками на скрипты. Я обновил вопрос, чтобы указать, что я не использую ASP.NET для веб-страниц. SPA использует ASP.NET для служб веб-API, однако ни одно из представлений не выполняется с помощью Razor или ASP.Net. - person codetoast; 16.07.2015
comment
@codetoast, в вашем случае отладчик Chrome имеет инструмент prettify, который создает расширенную версию миниатюрных файлов. В расширенной версии можно переходить по шагам и устанавливать точки останова. - person Dave Alperovich; 17.07.2015

arrow_upward
1
arrow_downward

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

  1. Для локальной отладки, если вы используете функцию связывания ASP.NET и должны указать ссылки на файлы в BundleConfig.cs. Вы можете разрешить браузеру загружать каждый файл как есть, установив флаг BundleTable.EnableOptimizations = true; в файле Global.asax. И мы загружаем единый файл пакета для работы в локальной среде.
  2. Для производства мы используем уменьшенные версии ссылок на файлы.

например, в вашем HTML вы можете сделать такую ​​проверку

@if (местный) {

@ Scripts.Render ("~ / Scripts / src / BundleName");

}

еще{

// Это частичный HTML-код, содержащий ссылки на уменьшенные файлы Html.RenderPartial ("ClientTemplates / MinifiedScripts");

}

Спасибо

person HGrover    schedule 14.07.2015