JavaScript — использовать grunt с существующим экземпляром WordPress
Я пытаюсь понять, как минимизировать & объединить код js / css в данной ситуации:
- Я купил тему, не разработал ее
- Я использую несколько плагинов. Они полезны, но выводят очень уродливый код (много встроенного CSS & js, в основном разработка кода с полными комментариями)
Я довольно новичок, чтобы ворчать, я использовал его в прошлом с пользовательскими веб-приложениями, но никогда не использовал WordPress. Интересно, может ли это помочь, когда у вас много PHP-скриптов / вставок, которые внедряют их уродливый код?
Итак, мой вопрос: есть ли способ заставить grunt работать с WordPress так, чтобы производственный код обслуживался в случае выше? Если так, то как?
Решение
Вы можете использовать плагин для удаления своих активов или вручную удалить их, а затем сказать grunt для объединения и минимизации их.
Эта статья может дать вам то, что вы ищете http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/
Другие решения
Боюсь, что нет способа достичь того, что вы ищете, без изменения этих плагинов.
Grunt — просто бегун задач JavaScript — у него нет никакого смысла в веб-приложении, будь то WordPress или что-то нестандартное. Вы даете Гранту некоторую информацию, и вы говорите ему, что делать с этой информацией, и она делает это. Поэтому, чтобы использовать Grunt для минимизации и объединения всех JavaScript и CSS на вашем сайте, вы должны извлечь его из плагинов и поместить в соответствующую файловую структуру.
Вообще говоря, когда плагин настаивает на включении нескольких JavaScript и / или CSS, это не очень хороший плагин. Например, моя команда использует gulp.js (по аналогии с Grunt) для многих внешних разработок WordPress (конкатенация, минимизация, дактилоскопия, автоматические префиксы и т. Д.), И мы очень разобрались в том, какие плагины мы используем ( если таковые вообще имеются) — одна из причин того, что именно ваш вопрос.
Ваш план кажется немного грязным.
В лучшем случае давайте предположим, что вы настроили и использовали простую задачу Grunt для минимизации всех ваших CSS и JS, используемых вашим экземпляром WordPress.
Это означает, что вы должны копаться в своем коде, находить, где каждый из ваших плагинов выбирает стили или скрипты, обрезать их и минимизировать их с помощью Grunt. После этого вы должны взять окончательный свернутый файл и снова внедрить его в ваш экземпляр WordPress.
Помимо того факта, что вам придется делать много пользовательских кодов, обновление ваших плагинов доставит вам много боли.
Чтобы придерживаться масштабируемого и простого плана, я предлагаю использовать BWP минимизировать плагин который позаботится о ваших стилях и сценариях, он обеспечит поддержку CDN.
Затем вы можете использовать Grunt в качестве механизма проверки качества кода. Uncss отличный инструмент, помогающий найти неиспользуемые стили. Грунт-usemin это тоже отличное решение.
Наконец, когда я вижу, что вы готовы перейти к инструментам командной строки, я настоятельно рекомендую взглянуть на WP-CLI это прекрасный интерфейс командной строки для WordPress.
Если вы готовы потратить время, необходимое для разделения вашего JS на модули, то Грунт-browserify может хорошо сработать для вас в долгосрочной перспективе. Однако, как уже упоминалось, это потребует извлечения соответствующего кода из ваших файлов плагинов.
Для минимизации CSS, Грунт-вно-cssmin стоило бы посмотреть. Мне также нравится Грунт-текст замены для изменения относительных путей в CSS перед тестированием или развертыванием (что может ухудшить ситуацию, если вы не разрабатываете direct-to-Wordpress).
Оформите тему FoundationPress-child, она использует grunt и несколько других приятных инструментов и библиотек. Я использую его в качестве основы для сайта WP, который я сделал для своего клиента. Это хорошая отправная точка, наряду с VCCW.