Как да използвате грухтене за автоматизиране на вашия работен процес [уроци]

Аз съм огромен защитник на автоматизацията защото прави живота много по-прост. Защо да прекарвате времето си в брутални, монотонни задачи, които изсмукват вашата жизнена сила, когато имате компютър, който може да прави неща за вас? Това е особено вярно за уеб разработки.

Много задачи за развитие могат да бъдат скучна работа. Докато разработвате може да искате да компилирате код, при натискане на версия за разработка можете да свържете и да изкопаете файлове, да премахнете ресурсите само за разработка и т.н. Дори и сравнително прости такива като изтриване на куп файлове или преименуване на папки може да заеме голяма част от нашето време.

В тази статия ще ви покажа как можете да направите живота си по-лесен, като използвате отличната функционалност, предлагана от Grunt, изпълнител на задачи на Javascript. Ще ви насоча през целия процес, така че не се тревожете, дори и да не сте помощник на Javascript!

Повече на Hongkiat.com:

CSSMatic прави CSS лесно за уеб дизайнери
Автоматизиране на задачи в Mac с действия с папки
Автоматизирайте вашите Dropbox файлове с действия
10 приложения за автоматизиране на задачите на устройството ви с Android
Как да (автоматично) архивирате уебсайта си в Dropbox

Инсталиране на Grunt

Инсталирането на Grunt е доста лесно, защото използва мениджъра на пакетните възли. Това означава, че може да се наложи да инсталирате сами Node. Отворете терминал или команден ред (отсега нататък ще наричам този терминал) и влезте nmp -v.

Ако видите номер на версия, която имате NPM инсталиран, ако видите грешка "команда не е намерена", ще трябва да я инсталирате, като отидете на страницата за изтегляне на възел и изберете версията, от която се нуждаете.

След като Node е инсталиран, получаването на Grunt е въпрос на единична команда, издадена в терминала:

npm install -g grunt-cli

Основно използване

Ще използвате Grunt на база проект-проект, тъй като всеки проект ще има различни изисквания. Да започнем проект сега, като създадем папка и се придвижваме към него чрез нашия терминал.

Двата файла съставляват сърцето на Grunt: package.json и Gruntfile.js. Файлът на пакета дефинира всички зависимости, които ще използва вашата автоматизация, Gruntfile ви позволява да контролирате как точно те се използват. Нека сега създадем пакета с голи кости със следното съдържание:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Името и версията са за вас, зависимости трябва да съдържат всички пакети, които използвате. В момента не правим нищо, за да се уверим, че самата Grunt се добавя като зависимост.

Може би си задавате въпроса какво прави тази калибрирана линия (~), наречена тилда.

Могат да се изискват версии с помощта на правилата от семантичния versioner за npm. Накратко:

Посочвате точно такава версия 4.5.2
Можете да използвате по-голяма / по-малка от посочената минимална или максимална версия > 4.0.3
Използването на тилда указва версия блок. Използвайки ~ 1.2 се счита за 1.2.x, всяка версия над 1.2.0, но под 1.3

Има много повече начини за определяне на версиите, но това е достатъчно за повечето нужди. Следващата стъпка е да се създаде Gruntfile, който ще изпълни нашите автоматизации.

 module.exports = функция (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('по подразбиране', []); ;

Това е в основата си скелет за Gruntfile; има две интересни места. Едно място е вътре initConfig () функция. Това е мястото, където се изпълнява цялата конфигурация на вашия проект. Това ще включва неща като обработка на LESS / SASS компилиране, премахване на скриптове и т.н..

Второто местоположение е под тази функция, когато зададете задачи. Можете да видите една зададена име “по подразбиране”. В момента е празен, така че не прави нищо, но ще го разгледаме по-късно. Задачите по същество поставят на опашка бита и парчета от нашата конфигурация на проекта и ги изпълняват.

Например задача с име “скриптове” може да свърже всичките ни скриптове, след това да намали получения файл и след това да го премести в крайното му местоположение. Тези три действия са дефинирани в конфигурацията на проекта, но са “събрани” от задачата. Ако това не е ясно, все още не се притеснявайте, ще ви покажа как се прави това.

Нашата първа задача

Нека създадем задача, която ни запълва един javascript файл.

Има четири неща, които трябва да направим всеки път, когато искаме да добавим нова задача:

Инсталирайте плъгин, ако е необходимо
Изисквайте го в файла Gruntfile
Напишете задача
Ако е необходимо, добавете я към група задачи

(1) Намерете и инсталирайте приставката

Най-лесният начин да намерите приставката, от която се нуждаете, е да напишете нещо подобно в Google: “изкореняване на JavaScript grunt плъгин”. Първият резултат трябва да ви доведе до grunt-contrib-uglify плъгин, който е точно това, от което се нуждаем.

Страницата Github ви казва всичко, което трябва да знаете. Инсталацията е един ред в терминала, ето какво трябва да използвате:

 npm install grunt-contrib-uglify --save-dev

Може да се наложи да изпълните това с административни привилегии. Ако получите нещо подобно npm ERR! Моля, опитайте да изпълните тази команда отново като root / администратор. по пътя просто напишете sudo преди командата и въведете паролата, когато бъдете подканени:

 sudo npm install grunt-contrib-uglify --save-dev

Тази команда действително анализира вашите package.json файл и го добавя като зависимост там, няма да е необходимо да правите това ръчно.

(2) Изискване в Gruntfile

Следващата стъпка е да добавите в Gruntfile като изискване. Обичам да добавям плъгини в горната част на файла, ето пълният ми Gruntfile след добавяне grunt.loadNpmTasks ( "грухтене-допринесоха-обезобразявам ');.

 module.exports = функция (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('по подразбиране', []); ;

(3) Създаване на задача за премахване на скриптове

Както обсъждахме, това трябва да се направи в рамките на initConfig () функция. Страницата Github за приставката (и повечето други приставки) ви дава много информация и примери. Ето какво използвах в моя тестов проект.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js'

Това е доста просто, посочих аз scripts.js файл в директорията js на моя проект и дестинацията на файла с разширението. Има много начини да зададете изходните файлове, ще ги разгледаме по-късно.

Засега нека разгледаме пълния файл на Grunt след добавянето му, за да се уверим, че знаете как нещата съвпадат.

 module.exports = функция (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('по подразбиране', []); ;

(4) Добавете тази конфигурация към работна група

Точно сега можете да отидете до вашия терминал и да напишете грухтене но ще ни трябват групите от задачи, които да изпълняват няколко задачи по-късно. Задачата ни по подразбиране е празна, само чакаме нещо да бъде добавено, така че нека да я променим на следното:

 grunt.registerTask ('по подразбиране', ['uglify']);

На този етап трябва да можете да отидете до терминала, тип грухтене и да видим как се извършва нагъването. Не забравяйте да създадете scripts.js разбира се!

Това не отнема много време, за да се създаде? Дори и да сте нови за всичко това и да ви отнеме известно време, за да работите по стъпките, времето, което спестявате, ще надмине времето, прекарано в него в рамките на няколко употреби..

Свързване на файлове

Нека да разгледаме свързващите файлове и научете как да зададете няколко файла като цел по пътя.

Конкатенацията е процесът на комбиниране на съдържанието на множество файлове в един файл. Ще ни трябва плъгинът grunt-contrib-concat. Нека работим по стъпките:

За да инсталирате плъгина, използвайте npm install grunt-contrib-concat --save-dev в терминала. След като сте го направили, не забравяйте да го добавите към вашия Gruntfile точно както преди да използвате grunt.loadNpmTasks ( "грухтене-допринесоха-Concat ');.

Следващата конфигурация. Да комбинираме три конкретни файла, синтаксисът ще бъде познат.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,,

Горният код отнема трите файла, дадени като източник и ги комбинира във файла, даден като дестинация.

Това вече е доста мощно, но какво ще стане, ако се добави нов файл? Трябва ли да се връщаме тук през цялото време? Разбира се, че не, можем да посочим цяла папка с файлове, които да се свържат.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,,

Сега всеки javascript файл в папката dev / js ще бъде обединен в един голям файл: JS / scripts.js, много по-добре!

Сега е време да създадете задача, така че да можем да свържем някои файлове.

 grunt.registerTask ('mergejs', ['concat']);

Това вече не е задачата по подразбиране, така че ще трябва да напишем името му в терминала, когато издаваме грухтене команда.

 грухтене

Автоматизиране на нашата автоматизация

Вече постигнахме голям напредък, но има още! Засега, когато искате да свържете или изтриете, трябва да отидете в терминала и да въведете съответната команда. Крайно време е да погледнем гледам команда, която ще направи това за нас. Ще научим също как да изпълняваме множество задачи едновременно, по пътя.

За да тръгнем ще трябва да вземем grunt-contrib-watch. Сигурен съм, че можете да го инсталирате и да го добавите към Gruntfile на yuor досега, така че ще започна с показване на това, което използвам в моя тестов проект.

 watch: scripts: files: ['dev / js / *. js'], задачи: ['concat', 'uglify'],,

Наричах набор от файлове, които да гледам “скриптове”, само за да знам какво прави. В този обект имам определени файлове, които да гледам и да изпълняват задачи. В предишния пример за конкатенация ние събрахме всички файлове в директорията dev / js.

В примера за премахване сме намалили този файл. Има смисъл да гледате папката dev / js за промени и да изпълнявате тези задачи, когато има такива.

Както можете да видите, многобройни задачи могат да се извикват лесно, като ги разделите със запетаи. Те ще се изпълняват последователно, първо в конкатенацията, а след това с изтриването в този случай. Това може да стане и с работни групи, поради което те съществуват.

Сега можем да променяме нашата задача по подразбиране:

 grunt.registerTask ('default', 'concat', 'uglify']);

Сега имаме два избора. Всеки път, когато искате да свържете и да намалите скриптовете си, можете да превключите към терминала и да въведете типа грухтене. Можете също да използвате командата за гледане, за да стартирате гледането на файловете си: мрънкане.

Той ще седи там, чака да промениш тези файлове. След като го направите, той ще изпълни всички задачи, които са му възложени, давай, опитай.

Това е много по-добре, не е необходим никакъв принос от нас. Вече можете да работите с файловете си и всичко ще бъде добре направено за вас.

Преглед

С това елементарно познание за това как могат да бъдат инсталирани и използвани плъгини и как работи командата за наблюдение, вие сте готови сами да станете наркоман. Грънт има много повече от това, което обсъждахме, но нищо не можеше да се справиш сами.

Използването на команди за компилиране на SASS, оптимизиране на изображения, автоматична корекция и др. Е само въпрос на следване на стъпките, които обсъждахме, и четене на синтаксиса, който плъгинът изисква.

Ако знаете за някои особено големи приложения за Grunt, моля да ни уведомите в коментарите, винаги сме заинтересовани да чуем как използвате инструменти като Grunt!