Въведение в Grunt, настройка на проект и изпълнение на задачи
Защо да използвате Grunt?
Защо да използвате програма за изпълнение на задачи (диспечер на задачи)?
Една дума - автоматизация. Вашата работа ще бъде намалена, когато изпълнявате задачи като минимизиране, компилиране, тестване и др. Ще ви е по-лесно да си вършите работата. След като го конфигурирате чрез Gruntfile (http://gruntjs.com/sample-gruntfile), всички горепосочени задачи ще бъдат изпълнени без никакви усилия от ваша страна.
Налични плъгини GRUNT
Налични плъгини GRUNT, на които да обърнете внимание:
- Плъгин grunt-contrib-jshint(jshint) - проверява js кода.
- Плъгинът grunt-contrib-concat(concat) е плъгин, който свързва файлове от един и същи тип (css,js) в един.
- Плъгинът grunt-contrib-uglify (uglify) е минификатор, използван за минимизиране на js файлове.
- Плъгинът grunt-contrib-cssmin (cssmin) е минификатор на CSS.
- Плъгин Grunt-contrib-sass (sass) - конвертирайте SASS в CSS.
- Плъгин grunt-contrib-watch (watch) - проследяване на промените във файловете.
- Плъгин grunt-contrib-imagemin (imagemin) - оптимизация на изображението.
- Плъгинът grunt-autoprefixer (autoprefixer) анализира CSS и добавя префикси на доставчик, използвайки данни от Can I Use.
- grunt-express се използва за Livereload https://github.com/gruntjs/grunt-contrib-cssmin
Grunt и неговите добавки се инсталират и управляват чрез npm (мениджър на пакети Node.js). За справка (опресняване на паметта): Gruntfile пример - sample-gruntfile, конфигуриране на задачи - configuring-tasks.
Инсталирайте grunt: npm install -g grunt-cli
Това ще позволинамерете командата grunt в системния път и я изпълнете от всяка директория.
Работа със съществуващ проект
- 1. Променете в основната директория на проекта
- 2. Инсталирайте зависимостите на проекта с npm install
- 3. Стартирайте Grunt с грухтене
Използването, опциите, възможните задачи за Grunt могат да бъдат намерени чрез командата grunt --help.
Подготовка на проекта
Gruntfile : Този файл се нарича Gruntfile.js и се използва за конфигуриране или дефиниране на задачи и зареждане на Grunt добавки. Когато в документацията се споменава Gruntfile, това означава Gruntfile.js или Gruntfile.coffee.
package.json
Можете да създадете package.json:
- 1. npm init команда
- 2. Започнете с примера по-долу и разширете спецификацията
Файлътpackage.json има свойство scripts, където могат да се дефинират скриптове. Тези скриптове ще помогнат за автоматизирането на някои процеси. Името на свойството в обекта scripts ще бъде името на скрипта, а стойността ще бъде командата, която сме въвели в терминала. В нашия случай транспилирахме помощния код на babel: "babel es2015.js -o es5.js" . След това в терминала ще бъде достатъчно да въведете командата: npm run build за да изпълните командата babel es2015.js -o es5.js.
Инсталиране на Grunt и gruntplugins (плъгини/зависимости)
Най-лесният начин да добавите Grunt и gruntplugins към съществуващ package.json е npm install --save-dev.
Например, това ще инсталира най-новата версия на Grunt към вашия проект, добавяйки я към devDependencies: npm install grunt --save-dev
Инсталирайте модула JSHint: npm install grunt-contrib-jshint --save-dev
Можете да инсталирате всички вече изброени зависимости във файла package.json с командата npm инсталиране.
Gruntfile се състои от следните части:
- обвиваща функция
- Настройка на проект и задача
- Зареждане на добавки и задачи
- Персонализирани задачи
Пример за Grunt файл
обвиваща функция
Всеки Gruntfile използва този основен формат; целият ви код трябва да бъде дефиниран в тази функция:
Настройка на проект и задача
Повечето задачи на Grunt разчитат на данни, които се предават като обект към метода grunt.initConfig (grunt.initconfig). Пример за конфигуриране на задачата uglify, настройките за тази задача са зададени в свойството със същото име.
Обърнете внимание на използването на данни от JSON файл.
Зареждане на добавки и задачи
Повечето задачи (минификация, компилация, тестване, анализ на код) са налични като плъгини за грухтене. След като плъгинът е посочен като зависимост в package.json и е инсталиран чрез npm install, той трябва да бъде включен във вашия Gruntfile с проста команда:
Персонализирани задачи
Можете да конфигурирате Grunt да изпълнява една или повече задачи по подразбиране, като дефинирате задача по подразбиране. В следващия пример командата grunt ще изпълни задачата uglify (която също е същата като командите по подразбиране grunt uglify и grunt). В масив могат да бъдат посочени произволен брой задачи:
Ако вашият проект изисква задачи, които не са предоставени от приставката Grunt, можете да дефинирате задачата си направо в Gruntfile.