Name: Agence Web Tremplin Numérique
Price range: $$$

я знал Грунт JS никогда не использовал его, но мне нужно было услышать от разработчика Symfony дайте мне массу, чтобы я посмотрел на это решение. Во-первых, заменить Ассет паритет Грунт JS был для меня решением заставить мои проекты работать Symfony с HHVM. Теперь сервер PHP de Facebook отлично работает с Ассет но я нахожу все меньше и меньше причин продолжать использовать Ассет. Наконец, использование хрюкать, плагин на основе Узел JS, заставляет большинство разработчиков использовать беседка, еще один плагин для управления зависимостями. мы поговорим о беседка ниже. Давайте кратко рассмотрим плюсы и минусы.

Внимание ! Прежде чем приступить к переносу своего приложения, я советую вам проверить версию вашего кода и провести некоторое тестирование. Настоятельно рекомендуется прочитать всю статью, прежде чем приступать к этой долгосрочной миссии.

резюме

Введение

Ассет, непонятый друг

Со своей стороны, я считаю, чтоАссет неправильно понимается и используется неправильно. Я объясню вам свои мысли. (Кроме того, я исправил эту статью из-за недопонимания с моей стороны, спасибо Мануэлю Кляйну за его отзыв).

Выгода

ИспользованиеАссет позволяет отменить кеширование ресурсов, потому что имя сгенерированных ресурсов JS и CSS меняется каждый раз, когда вы запускаете команду «актив: дамп”. Определенное преимущество!

недостатки

Assetic предлагает несколько вариантов настройки генерации ресурсов.
Необходимо установить пакеты PHP для создания экзотических ресурсов, таких как LESS. Код PHP установлен в поставщики пока эта задача полезна только для клиента. Нет для сервера. Кроме того, это увеличивает количество вашего проекта.
Код PHP необходимо в шаблоны Веточка использование Ассет или почти все. В то время как с Grunt скомпилированный ресурс будет называться именем, которое вы ему дали.

Действительно используйте Assetic в своих шаблонах

я часто вижу в шаблоны Веточка с которыми я сталкиваюсь, ресурсы иногда связаны через Ассет, иногда через активы de Симфония.

# Использование ассета
@NamespaceMyBundle/Resources/public/css/main.css
# Неиспользуемый ассет, используя ассеты
/bundles/namespacemy/css/main.css

В первом случае Ассет действительно применимо. Во втором случае Ассет полностью скрыт, чтобы не использовать активы de Symfony. Использование активы на мой взгляд, также является ошибкой, по крайней мере, для доступа к ресурсам JS и CSS. Конец скобок...

Grunt JS — ооочень гибкий компилятор!

Грунт JS на основе Node.js. Это клиентский инструмент, который использует модули для выполнения многих действий, таких как объединение файлов, минификация, сжатие изображений, компиляция LESS, TypeScript… В отличие от Ассет, вам придется настроить определенные конфигурации, но будьте уверены, эти первоначальные инвестиции окупятся и в конечном итоге намного быстрее, чемАссет.

Введение в Bower, composer.json ресурсов

Грунт JS является хорошим и подходит для размещения на том же сегменте, что иАссет. Но пока вы используете Node.js, а также использовать беседка ! Это менеджер зависимостей. Проще говоря, вы определяете, какие ресурсы вам нужны, «такая-то библиотека в такой-то версии» и беседка позаботится о том, чтобы получить нужную вам версию. Конечно, как и composer.json для PHP, вы можете добавить диапазоны версий. Если вам нужна библиотека версии 3.3., * Бауэр предоставит вам последнюю доступную версию. Решение для простого обновления этих ресурсов. Повторяющаяся проблема в наших стандартных проектах, потому что у нас есть (и была!) тенденция скачивать версию и никогда не обновлять ее впоследствии. У нас не было мелких обновлений, которые иногда так полезны.

Технически, беседка использует файл bower.json. Его синтаксис очень прост. Я призываю вас использовать его, даже если вы можете обойтись без него. Файл должен иметь версию, в отличие от ресурсов, которые беседка придет скачать для вас. Чтобы вы начали, я приведу пример ниже.

Управление версиями скомпилированных ресурсов

Со своей стороны, я имел привычку не версионировать мои скомпилированные ресурсы для Ассет но я решил сделать наоборот для Грунт JS. Поскольку у меня нет ресурсов для управления беседка (см. Введение в беседка), я соберу свои ресурсы и гиттеры. Таким образом, я могу быстро развернуть свое приложение. У меня никогда не было отзывов об этой практике, но она кажется мне респектабельной, потому что две операции отменяются во время развертывания (восстановление ресурсов с беседка и скомпилировать с Грунт JS), а также необходимость иметь Node.js на его машине.

Удалите Assetic из нашего проекта Symfony

Ассет был выбран в качестве компонента по умолчанию, отвечающего за компиляцию ресурсов. Имейте в виду, что, несмотря ни на что, его очень легко удалить.

Удалить блоки Веточка Тип Javascript et таблицы стилей. Они не нужны. Отложите файлы, которые вы использовали. В будущем файлы, которые вы хотели бы использовать, будут определены в файле Gruntfile.js. Мы увидим это чуть позже.

# приложение/config/config.yml
# Удалить конфигурацию из ассета. Также они будут в config_prod.yml, config_dev.yml и других загруженных файлах.
актив:
 отлаживать: «%kernel.debug%»
 использовать_контроллер: ложный
 связки: []
 фильтры:
 cssпереписать: ~

#app/AppKernel.php
# Остановить загрузку AsseticBundle, удалив строку из AppKernel
...
new SymfonyBundleAsseticBundleAsseticBundle()
...

# композитор.json
# Удалить набор ресурсов
...
«symfony/assetic-bundle»: «~2.3»
...

Вот вы и отключились Ассет глобально. Таким образом, больше не ожидайте найти команду Актив: дамп et Актив: смотреть.

Как будет работать Grunt JS в рамках нашего проекта?

Нам нужно будет настроить наш проект с тремя файлами:

пакет.json что позволит нам установить плагины Node.js (Грунт JS и его вклады);
Bower.json сообщать о зависимостях, которые необходимо разрешить для компиляции наших ресурсов;
Gruntfile.js Над которым вы будете работать больше всего. Он будет содержать все возможные действия и/или действия, которые необходимо выполнить для компиляции части или всего вашего проекта.

package.json для установки Grunt JS

{
«зависимости»: {
«хрюкать»: «^0.4.5»,
«ворчание без вклада»: «~ 0.11.0»,
«ворчать-вносить-уродовать»: «^0.6.0»,
«загрузить-ворчание-задачи»: «^0.6.0»
},
«devDependencies»: {
«хрюкать»: «^0.4.5»
}
}

Во-первых, используйте этот контент. Он требует установки Грунт JS и вклады, два из которых (без хрюканья et ворчание-вклад-уродство) позволит вам скомпилировать ваши файлы JavaScript и файлы Меньше.

Bower.json для решения моих зависимостей (bootstrap, font-awesome, …)

{
"игнорировать"[
«**/.*»,
«узловые_модули»,
«bower_components»,
" тест ",
"тестирование"
],
«зависимости»: {
«бутстрап»: «3.3.*»
}
}

Вот минимальный файл. В моем случае я запросил последнюю версию ветки 3.3 Начальная загрузка быть загруженным. По умолчанию, когда вы делаете установка беседки ваши зависимости будут установлены в папку Bower_components. Благодаря использованию .bowerrc вы можете изменить папку назначения. Дополнительную информацию можно найти на веб-сайте Bower.

1 2	# Устанавливаем зависимости с помощью Bower $ беседка установить

Gruntfile.js — с чего все начинается

Все команды и действия, которые вы хотели бы добавить в этот файл Gruntfile.js. Среди прочего, вы можете компилировать файлы меньше css et пререкаться, объединять файлы любого типа, компилировать Машинопись, минификатор Файлы JavaScript, изображения, а также файлы HTML. Вы также можете изменять размер изображений и копировать файлы (например, шрифты).

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

модуль.экспорт= функция (хрюкать) {
требовать('загрузить-ворчание-задачи')(хрюканье);
grunt.initConfig({
Меньше: {
расстояние: {
опционы: {
сжимать: правда,
юикомпресс: правда,
оптимизация: 2
},
файлов: {
«веб/css/main.css»[
«bower_components/bootsrap/dist/css/bootstrap.css»,
«src/Namespace/MyBundle/Resources/public/css/main.less»
]
}
}
},
уродовать: {
опционы: {
калечить: ложный,
исходная карта: правда
},
расстояние: {
файлов: {
'веб/js/main.js'[
'src/пространство имен/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
хрюк.registerTask('по умолчанию'["меньше", "уродовать"])?
};

Вот вполне рабочий файл. Я также использую его в проекте с небольшим рама потому что это API (Программный интерфейс приложения). Ассет был в моем случае совершенно бесполезен. Поэтому я предпочел обойтись без него, чтобы использовать инструмент, внешний по отношению к серверу, и доставлять идеально сконструированные ресурсы во время развертывания.

Опишем действия для Gruntfile.js

В предыдущем файле я настраиваю два вклада Грунт JS (_без _и уродовать), который я установил благодаря моему пакет.json. Вы заметите, что плагины легко отличить друг от друга. Возьмем случай расширения Меньше.

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

Тогда структура подмножеств одного и того же расширения является ISO. В Contrario структура каждого вклада отличается. Стандартные вклады часто представлены множеством примеров. Официальные плагины доступны в репозитории GitHub.

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

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

Искусство компиляции

А теперь компiloнаши источники. С Ассет, мы запускаем эту команду:

1	php приложение/консоль активик: дамп

Теперь мы удалили АссетБундл. У нас больше нет этого заказа. Итак, мы собираемся запустить наш плагин из Узел.

хрюкать

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

1	хрюк.registerTask('по умолчанию'["меньше", "уродовать"])?

Вы бы очень хорошо определили профиль Javascript кто бы не казнил уродовать.

1	хрюк.registerTask('javascript'['уродовать'])?

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

1	хрюкать javascript

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

хрюкать

Заключение

Теперь вы знаете, как компилировать свои ресурсы. Если вы не уловили всех тонкостей, вы должны быстро оценить всю гибкость, предлагаемую хрюкать в отношенииАссет. Более того, помимо типичных ресурсов, таких как javascript и css, вы также можете обрабатывать шрифты, изображения... Актив, который меня быстро покорил.

Реальное преимущество хрюкать это его гибкость его использование. хрюкать et беседка Между ними олицетворяет альтернативу Assetic. Без беседка вы все еще можете работать с хрюкать но опыт не будет тотальным.

Я надеюсь, что эта статья позволит вам легко понять, как использовать хрюкать. Будь смелым, ты почти у цели!