Кнопка отправки угловой формы html grunt-minified не отображается (узел)

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

<form class="form-horizontal ng-submit="entry.addEntry()" novalidate>
    <fieldset class="form-group">
        <label class="control-label col-md-2" for="price">Price:</label>
        <div class="col-md-10">
            <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price" />
        </div>
    </fieldset>

    <fieldset>
        <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>
    </fieldset>                            
</form>

Но после минимизации (с помощью Grunt и Usemin) и подачи минифицированных файлов из папки Dist входные данные формы отображаются правильно, но кнопки отправки просто нет.

Соответствующий раздел dist/scripts/script.*******.js показывает, что HTML-код кнопки все еще присутствует.

a.put('...<form class="form-horizontal" ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group has-feedback"> <label class="control-label col-md-2" for="price">Price:</label> <div class="col-md-10"> <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price"> </div> </fieldset>
<fieldset>\r\n                                <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>\r\n                            </fieldset>\r\n                            \r\n                        </form>

Очевидно, что минификация Grunt отправила кнопку в папку dist, но она просто не отображается ни в chrome, ни в firefox, ни в heroku.

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

Если это вина, что можно сделать? Кроме того, почему файл grunt вставляет пробелы вокруг кнопки? Он также сделал это в нескольких других областях. Но в любом случае удаление пробелов и новых строк вручную не решило проблему.

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

Мой редактор — Visual Studio Code.

Пожалуйста, помогите мне понять, что я сделал не так!


html angularjs gruntjs grunt-usemin
person Jope    schedule 29.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

я исправил проблему

Это была небольшая ошибка в одном из полей ввода. Не тот, который я написал выше, на самом деле.

Я случайно написал тег textarea как самозакрывающийся тег, как старые теги ввода.

<textarea something something /></textarea>

unminified это было интерпретировано так, как я предполагал, и поэтому, конечно, ошибка никогда не была обнаружена

но в процессе минификации он был уменьшен до

<textarea something something />

который никогда не закрывался должным образом и поэтому удалял некоторые последующие блоки

поэтому я думаю, что могу обобщить это:

Синтаксический анализатор html может обрабатывать некоторые ошибки до минимизации, но синтаксический анализатор минификации может обрабатывать ошибки по-другому, и впоследствии могут появиться ошибки

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

person Jope    schedule 30.01.2016