Плагин - это не что иное, как часть программного обеспечения в приложении, которое позволяет расширять его функциональные возможности во время соединения. Эти плагины могут различаться в зависимости от приложения, которое их использует, но их функции всегда будут одинаковыми, и это облегчит жизнь тем, кто их использует.
Эти плагины могут использоваться в сочетании с современными веб-браузерами, менеджерами контента, такими как Wordpress, Joomla или Drupal, и даже с текстовыми редакторами или медиапроигрывателями. Но как разработчики приложений мы всегда смотрим за пределы и думаем: почему бы не разработать наш собственный плагин? И ответ прост, с Grunt мы можем сделать это.
требования
Прежде чем перейти к теории разработки плагинов в Grunt, давайте посмотрим, что нам нужно для разработки этого учебника:
Среда разработки
Мы должны были установить Node.js, npm и Grunt, так как без него мы не сможем выполнить ни одного из примеров из учебника.
Технические знания
Необходимо знать, что такое Grunt, чтобы иметь базовые знания JavaScript, кроме того, мы должны знать, как создавать основные задачи с самим собой, и не мешало бы иметь некоторые знания о нескольких задачах с Grunt, наконец, важно иметь четкие представления о структуре. проекта с Grunt.
инструменты
У нас должен быть текстовый редактор, такой как Sublime Text или NotePad ++, с помощью которого мы можем написать код, необходимый для выполнения наших задач.
Структура нашего плагина
Простой плагин в Grunt состоит из каталога задач, который содержит один или несколько файлов JavaScript, которые их определяют, где эти файлы имеют ту же структуру, что и файл Gruntfile . В каталоге задач мы можем найти другой каталог с именем lib, который будет содержать любое количество функций или объектов, которые помогут нам в работе нашего плагина.
Наш плагин также содержит обычные файлы, которые мы использовали, package.json и Gruntfile.js, где последний содержит строку, которая загружает задачи каталога с тем же именем, что делает наш плагин намного проще попробовать
Создание структуры
Поскольку мы знаем, как структурированы плагины, мы построим структуру для нашего примера. В этом случае мы собираемся создать простой плагин, который откроет файл в указанном браузере, это не что-то очень смелое, но это поможет нам увидеть процесс его создания.
Прежде всего, создайте каталог с именем plugin-grunt, и внутри него мы создадим еще один каталог с именем tasks . Теперь мы создадим наш файл package.json, но на этот раз мы будем использовать npm для его создания, для этого нам нужно только запустить npm init и мы можем ввести значения для него через консоль, давайте посмотрим этот процесс:
После создания нашего файла package.json нам нужно только установить grunt в нашем каталоге, чтобы протестировать наш плагин, для этого мы используем npm рядом с параметром save, чтобы сохранить зависимости в package.json . Чтобы закончить с начальными настройками, давайте посмотрим реакцию консоли при выполнении команды:
Построение логики нашего плагина
Для выполнения нашего примера нам понадобится, чтобы Grunt мог выполнять внешнюю программу, мы должны определить, в какой операционной системе мы запускаем плагин, поскольку идея состоит в том, чтобы сделать его максимально эффективным, и, наконец, необходимо, чтобы мы могли вызывать внешний файл. от Гранта . На первый взгляд все это может показаться довольно сложным, но правда в том, что Grunt и используя модули Node.js, мы можем сделать это без особых сложностей.
Первое, что мы сделаем, это создадим в tasks / lib наш файл с именем launcher_chrome.js, это будет отвечать за инкапсуляцию всей логики для запуска Google Chrome, давайте посмотрим на базовый код и затем объясним его содержание:
module.exports.init = function (grunt) {var exports = {}; возврат (экспорт); }; Сначала мы используем module.exports, чтобы определить, какие объекты и функции предоставляет этот модуль. Определяется функция, которая возвращает объект JavaScript, который мы создаем, что позволяет нам иметь как публичные, так и приватные методы. Наша основная программа будет использовать этот модуль по запросу и вызовет функцию init (), которая вернет объект, представленный в экспорте . После получения нашей первоначальной структуры мы должны создать функцию, которая создает команду на основе операционной системы, которую использует пользователь, для этого мы будем использовать метод Node с именем process.platform () для его обнаружения. Давайте посмотрим, как выглядит наш launcher_chrome.js с внесенными изменениями:
module.exports.init = function (grunt) {var exports = {}; var create Command = function (file) {var command = ""; var linux = !! process.platform.match (/ ^ linux /); var windows = !! process.platform.match (/ ^ win /); if (windows) {command = 'start chrome' + file; } else if (linux) {command = 'google-chrome "' + file + '"'; } else {command = 'open -a "Google Chrome"' + файл; } return (команда); }; возврат (экспорт); }; Как мы видим для каждой операционной системы, мы создаем соответствующую команду, чтобы открыть браузер и вернуть эту команду в конце нашей функции. Чтобы закончить с нашим файлом, нам нужно определить открытый метод, который мы будем вызывать open (), который будет использовать метод exec () Node для запуска Google Chrome, который принимает команду, которую мы хотим выполнить, в качестве первого аргумента и функцию типа обратного вызова выполнить, когда команда заканчивается как вторая. Давайте посмотрим на последний аспект нашего кода для файла launcher_chrome.js : module.exports.init = function (grunt) {var exports = {}; var create Command = function (file) {var command = ""; var linux = !! process.platform.match (/ ^ linux /); var windows = !! process.platform.match (/ ^ win /); if (windows) {command = 'start chrome' + file; } else if (linux) {command = 'google-chrome "' + file + '"'; } else {command = 'open -a "Google Chrome"' + файл; } return (команда); }; exports.abrir = function (file, done) {команда var, process, exec; команда = создать команду (файл); grunt.log.writeln ('Выполнение команды ...' + команда); exec = require ('child_process'). exec; process = exec (команда, функция (error, stdout, stderr) {if (error) {if (error.code! == 0) {grunt.warn (stderr); grunt.log.writeln (error.stack);} } done ();}); }; возврат (экспорт); }; В функции open () мы используем функцию createCommand () для получения команды в соответствии с операционной системой, которую мы выполняем, а затем выполняем ее, а затем в обратном вызове проверяем, сработал ли наш процесс. Кроме того, мы можем понять, что этот метод связан с модулем, который мы экспортируем, что позволит вам сделать его видимым для задач Grunt . Мы уже построили нашу логику, теперь нам просто нужно сделать ее доступной для Grunt . $config[ads_text5] not found
Определите задачу в Grunt
Наша задача Grunt должна взять имя файла в качестве аргумента и затем вызвать метод open (), который мы только что создали. Для этого мы создадим в нашем каталоге задач файл open_con_chrome.js, который будет содержать следующий исходный код:
«использовать строгое»; module.exports = function (grunt) {}; Как только это будет определено, мы должны потребовать наш модуль, который мы только что создали и определили нашу задачу. Для этого мы используем метод registerTask и вызываем метод open (), отправляя имя файла для задачи вместе со ссылкой на функцию done, давайте посмотрим на последний аспект нашего файла: «использовать строгое»; module.exports = function (grunt) {var launcher Chrome = require ('./ lib / launcher_chrome.js'). init (grunt); grunt.registerTask ('open', 'Открыть файл или URL с помощью браузера Chrome', функция (файл) {var done = this.async (); средство запуска Chrome.open (файл, готово);}}; Мы закончили со строительством нашего плагина, но чтобы проверить его функциональность, нам нужно создать известный файл Gruntfile.js, который отвечает за загрузку наших задач, давайте посмотрим на его содержание: «использовать строгое»; module.exports = function (grunt) {grunt.loadTasks ('tasks'); }; Теперь нам нужно только попробовать наш плагин, для этого в нашей консоли мы должны выполнить следующую команду: открытое: Gruntfile.jsКоторый автоматически откроет содержимое нашего файла в окне браузера Google Chrome и в консоли укажет, какая команда использовалась: $config[ads_text5] not found
Если мы хотим пойти немного дальше, давайте посмотрим, как наш плагин является мультиплатформенным, и он также работает для нас в Linux, поскольку, находясь в его каталоге, мы делаем вызов файла Gruntfile.js, давайте посмотрим:
Мы даже можем напрямую открыть веб-страницу, вместо имени файла мы отправляем URL в качестве аргумента:
Как мы видим, это неплохо для нашего плагина, который может открывать любой файл, который мы указываем, независимо от операционной системы и даже любой веб-страницы, которую мы указываем.
Итак, мы завершили учебное пособие, в котором мы могли бы создать простой плагин с Grunt, используя инструменты, которые он предоставляет в наше распоряжение, вместе с модулями Node, мы должны немного подробнее изучить их, и даже если мы решимся разрабатывать несколько сложнее и загрузите его в репозитории npm, чтобы помочь сообществу Grunt .$config[ads_text6] not found
СТАТЬИ