Содержание
Средства выполнения задач JavaScript, такие как Grunt, стали чрезвычайно популярными среди разработчиков интерфейса. Это потому, что они помогают делать то, что мы все хотим делать на своей работе - экономить время!
Но сейчас доступно более 5000 (и продолжает расти) подключаемых модулей Grunt, поэтому разработчикам может быть сложно найти эти алмазы в необработанном виде. Мы оглянулись на то время, когда мы застряли в Grunt, чтобы найти идеальный рецепт подключаемых модулей Grunt, которые вы должны использовать.
01. Uglify
Каждый достойный интерфейсный разработчик знает о преимуществах минимизации файлов JavaScript, и именно этим занимается этот плагин. Такова его популярность, что он включен в Руководство по началу работы с Grunt. Несмотря на название, этот плагин также можно использовать для украшения вашего кода JavaScript, хотя это не особенно полезно для производственного использования.
02. Sass
Могут быть некоторые споры о том, какой препроцессор CSS действительно правит, но здесь, в Stickyeyes, мы остановились на Sass, а не на его главном конкуренте Less. Этот плагин позволяет нам писать наши файлы Sass и автоматически компилировать их в CSS. Преимущества использования препроцессора CSS требуют отдельной статьи, но можно с уверенностью сказать, что, если вы его еще не используете, вы очень опаздываете на вечеринку!
03. CSSMin
Этот плагин является CSS-эквивалентом Uglify. Он просто получает любые указанные файлы CSS и минимизирует их. Конечно, если вы собираетесь использовать это вместе с плагином Sass, вам необходимо убедиться, что эта задача запускается после задачи Sass.
Есть много альтернатив CSSMin, которые также могут уменьшить размер ваших файлов CSS, используя несколько иные методы; CSS nano, CSS wring, CSS shrink и т. Д. Прочтите этот удобный тест, если вам нравятся подобные вещи.
04. Конкат
Как следует из названия, этот плагин просто берет несколько файлов и объединяет их в один. Как и в случае с минимизацией кода, объединение файлов - также старая практика для сокращения времени загрузки страницы.
Конкатенация файлов всегда должна использоваться в производстве как для JavaScript, так и для CSS. Обычно это последняя задача, которую нужно запустить - после задачи предварительной обработки CSS и задачи минификации. Легко просто указать этому плагину объединить все файлы в определенном каталоге, но будьте осторожны с порядком, в котором файлы будут объединены - вам может потребоваться указать определенный порядок или назвать файлы, чтобы они всегда объединялись в том порядке, в котором вы хотите. .
05. ImageMin
В том же духе, что и CSSMin и Uglify, ImageMin решает другую извечную проблему загрузки страницы - размер файла изображения. «Уменьшение» изображений обычно является первым портом для оптимизации, поэтому этот плагин необходим для максимального уменьшения общего размера файла страницы.
Если вы работаете с JPG, PNG, GIF или SVG (постоянно набирающим популярность форматом векторных изображений), этот плагин обеспечит уменьшение размера файлов ваших изображений без потерь без необходимости пошевелить пальцем. Если в вашем проекте много изображений, рекомендуется запускать эту задачу только при переходе к производственной среде, а не запускать эту задачу для события наблюдения (см. Следующий пункт).
06. Смотреть
Этот плагин на самом деле не влияет на интерфейс вашего веб-сайта, но он чрезвычайно полезен для создания эффективного процесса Grunt. Watch просто следит за любыми указанными вами каталогами, и как только что-то изменяется, оно автоматически запускает определенные задачи Grunt.
Таким образом, вы можете настроить одно условие наблюдения в каталоге 'js' для выполнения задач JavaScript, а другое - в каталоге 'css' для выполнения задач CSS. Это означает, что вам никогда не придется вручную запускать основной процесс Grunt! Просто инициализируйте задачу grunt watch, прежде чем начинать вносить изменения, и вы можете забыть, что она даже там есть.
Слова: Джейми Шилдс
Джейми Шилдс - back-end разработчик в агентстве цифрового маркетинга Stickyeyes.
Как это? Прочитайте это!
- Grunt vs Gulp: какой инструмент сборки JavaScript выбрать?
- 8 способов улучшить настройку Grunt
- Лучшие бесплатные темы WordPress
