Я относительно новичок в использовании Bower, и я не могу сказать, должны ли вы ссылаться на bower_components в процессе производства. Должен ли я использовать задачу grunt для связывания или копирования файлов, которые мне нужны из bower_components, в отдельный каталог?
Я спрашиваю об этом, потому что я никогда не видел веб-сайта с каталогом "bower_components", поэтому я немного напуган. Все руководства для начинающих просто ссылаются на "bower_components/...", например, на учебник angular.
Вы используете Йоман?
В зависимости от вашего Gruntfile.js у вас должны быть разные задачи, одна из них - "bower-install": эта задача будет читать index.html, найдите следующий блок комментариев
<!-- bower:js -->
<!-- endbower -->
и введите внутри всех ваших зависимостей, указанных в вашем bower.json. Это означает, что задача будет записывать для всех ваших < script src "/bower_components/.." > блоки.
Вы никогда не замечали сайт с ссылками "bower_components", потому что ваш /app dir - это ваша среда разработки, ваш исходный проект. Из источника вы создадите производственное приложение, выполняющее задачу "build": эта задача состоит из разных подзадач, которые выполняют разные задания, одна из которых объединяет все сценарии, добавленные задачей bower_install, в один js файл.
Тогда есть еще одна задача, которая минимизирует этот файл, другой, который будет запускать тесты, другой, который создаст каталог "dist", где находится ваш производственный сайт и т.д.
Если вы используете Yeoman, у вас есть все эти задачи, уже настроенные в Gruntfile.js, просто откройте его и попытайтесь понять, что делает каждая задача.
На первый взгляд это может быть довольно сложно понять, например, задача сборки относится к 14 или 15 подзадачам, я предлагаю вам зарегистрировать пользовательские задачи, которые запускают только одну задачу, и посмотреть, что произойдет.
Приветствия
Вы можете дать вашему каталогу установки bower лучшее имя, создав файл .bowerrc (рядом с вашим файлом bower.json) и установив для свойства directory что-то еще. Например, у меня есть следующее в .bowerrc:
{
"directory": "public/vendor"
}
Тогда есть также близкий вопрос о том, следует ли вам проверять содержимое этого каталога на исходный элемент управления. Более подробное обсуждение этого вопроса см. здесь.
И, наконец, как уже отмечали другие, он рекомендовал вам объединить и минимизировать свои внешние интерфейсы.
Я не вижу никаких проблем с привязкой к нему напрямую, но обычно вам нужно объединить все ваши сценарии в один файл и угадать его, чтобы размер файла был снижен для производства.
Задача grunt uglify может легко справиться с этими двумя вещами. Вам просто нужно предоставить массив файлов для присоединения.
// Project configuration.
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/input2.js']
}
}
}
});
Это довольно обычное начало, просто используя bower_components. Вы можете увидеть это в angular -seed starter project script ссылках. Как только вы приступите к развертыванию производственного приложения, а время загрузки и производительность станут критическими, вы должны посмотреть на преобразование в решение для слияния и минимизации зависимостей.