Съдържание
Изпълнителите на задачи на JavaScript като Grunt станаха изключително популярни сред разработчиците от предния край. Това е така, защото те помагат да направим едно нещо, което всички искаме да правим в работата си - спестяваме време!
Но с повече от 5000 (и преброяващи) приставки Grunt, които вече са на разположение, за разработчиците може да е трудно да намерят грубите диаманти на тези. Погледнахме назад към нашето време, заседнало в Grunt, за да намерим перфектната рецепта за приставки Grunt, която трябва да използвате.
01. Uglify
Всеки разработчик, който си заслужава, знае за предимствата на минимизирането на JavaScript файловете и точно това прави тази приставка. Такава е популярността му, тя всъщност е включена в Ръководството за начало на Grunt. Въпреки името, този плъгин може да се използва и за разкрасяване на вашия JavaScript код - въпреки че това не е особено полезно за производствена употреба.
02. Сас
Може да има някои спорове за това кой CSS препроцесор наистина управлява нощувката, но тук в Stickyeyes сме се спрели на Sass, а не на основния му съперник, Less. Този плъгин ни позволява да пишем нашите Sass файлове и да ги компилираме автоматично в CSS. Предимствата на използването на CSS предварително обработващ процесор налага отделна статия сама по себе си, но е безопасно да се каже, че ако не използвате такава, вече закъснявате за партито!
03. CSSMin
Тази приставка е CSS еквивалент на Uglify. Той просто получава всички посочени CSS файлове и ги минимизира. Разбира се, ако ще използвате това заедно с приставката Sass, тогава трябва да се уверите, че тази задача се изпълнява след задачата Sass.
Има много алтернативи на CSSMin, които също могат да намалят размера на вашите CSS файлове, използвайки малко по-различни техники; CSS nano, CSS извиване, CSS свиване и др. Прочетете този удобен бенчмарк, ако се интересувате от този тип неща.
04. Конкат
Както подсказва името, този плъгин просто взема множество файлове и ги обединява в един. Както при минимизирането на кода, обединяването на файлове също е вековна най-добра практика за намаляване на времето за зареждане на страниците.
Конкатенацията на файлове винаги трябва да се използва в производството както за JavaScript, така и за CSS. Това обикновено е последната изпълнена задача - след задачата за предварителна обработка на CSS и задачата за минимизиране. Лесно е просто да кажете на този плъгин да обединява всички файлове в определена директория, но внимавайте реда, по който файловете ще бъдат обединени - може да се наложи да дадете конкретна поръчка или да назовете файловете, така че те винаги да бъдат обединени в реда, който искате .
05. ImageMin
По същия начин като CSSMin и Uglify, ImageMin се справя с друг вековен проблем за зареждането на страниците - размерът на файла на изображението. „Минимизацията“ на изображението обикновено е първото пристанище за оптимизация, така че този плъгин е от съществено значение за намаляване на общия размер на файла на страницата възможно най-много.
Ако работите с JPG, PNG, GIF или SVG (все по-популярен формат на векторни изображения), този плъгин ще доведе до намаляване на размера на файла на вашите изображения без загуба, без да се налага да вдигате пръст. Ако имате много изображения във вашия проект, добра идея е да изпълнявате тази задача само когато натискате към производство, вместо да я изпълнявате на събитие за гледане (вижте следващата точка).
06. Гледайте
Този плъгин всъщност не засяга вашия уебсайт, но е изключително полезен при създаването на ефективен процес на Grunt. Watch просто следи всички указани от вас директории и след като нещо се промени, той автоматично ще задейства определени задачи на Grunt.
Така че можете да настроите едно условие за гледане в директорията на 'js', за да стартирате вашите JavaScript задачи, и друго в директорията на 'css', за да стартирате вашите CSS задачи. Това означава, че никога няма да се налага да стартирате ръчно основния си процес на Grunt! Просто инициализирайте задачата за гледане на мрънкане, преди да започнете да правите промени и можете да забравите, че дори е там.
Думи: Джейми Шийлдс
Джейми Шийлдс е разработчик отзад в агенцията за дигитален маркетинг Stickyeyes.
Като този? Прочети това!
- Grunt срещу Gulp: Кой инструмент за изграждане на JavaScript трябва да изберете?
- 8 начина да подобрите вашата настройка на Grunt
- Най-добрите безплатни теми за WordPress
