Создайте и опубликуйте свой плагин Grunt

Давайте подключим Cheerio как зависимость:

 npm install cheerio --save 

Это установит пакет node_modules в ваш каталог node_modules а также, благодаря --save , сохранит его под dependencies в вашем package.json . Осталось только открыть файл tasks/typographic_adoption.js и загрузить модуль cheerio:

 module.exports = function(grunt) { var cheerio = require('cheerio'); ... 

Теперь давайте исправим наши доступные опции. На этом этапе пользователи могут настроить только одну вещь: элементы, которые они хотят де-сиротизировать. Найдите объект options внутри функции grunt.registerMultiTask и измените его соответствующим образом:

 var options = this.options({ selectors: 'h1.h2.h3.h4.h5.h6.p.blockquote.th.td.dt.dd.li'.split('.') }); 

Объект options дает нам все индивидуальные настройки, которые пользователи плагина помещают в свои Gruntfile.js а также возможность устанавливать параметры по умолчанию. Идите дальше и измените цель custom_options в своем собственном Gruntfile.js чтобы отразить то, что тестируют ваши тесты из главы 2. Так как я просто хочу обработать абзацы, это выглядит так:

 custom_options: { options: { selectors: ['p'] }, files: { 'tmp/custom_options': ['test/fixtures/testing'] } } 

Обязательно обратитесь к документации Grunt API для получения дополнительной информации.

Теперь, когда у нас есть cheerio и наши опции, мы можем пойти дальше и реализовать ядро ​​плагина. Вернитесь к tasks/typographic_adoption.js и прямо под строкой, в которой вы строите объект параметров, замените код scaffolding следующим:

 this.files.forEach(function(f) { var filepath = f.src, content, $; content = grunt.file.read(filepath); $ = cheerio.load(content, { decodeEntities: false }); $(options.selectors.join(',')).each(function() { var text = $(this).html(); text = text.replace(/ ([^ ]*)$/, ' $1'); $(this).html(text); }); grunt.file.write(f.dest, $.html()); grunt.log.writeln('File "' + f.dest + '" created.'); }); 

Мы перебираем все файлы, которые мы указали в Gruntfile.js . Функция, которую мы вызываем для каждого файла, загружает содержимое файла с grunt.file API grunt.file , grunt.file его в cheerio и ищет все элементы HTML, которые мы выбрали в опциях. Найдя его, мы заменяем последний пробел внутри текста каждого элемента неразрывным пробелом и записываем его обратно во временный файл. Наш тестовый набор теперь может сравнивать эти временные файлы с нашими ожидаемыми и, надеюсь, он показывает вам что-то вроде этого:

 grunt ... Running "nodeunit:tests" (nodeunit) task Testing typographic_adoption_test.js..OK >> 2 assertions passed (59ms) Done, without errors. 

Потрясающие! Мы только что реализовали наш собственный маленький плагин Grunt, и он работает как шарм!

Если вы хотите, вы можете улучшать, расширять и полировать его до тех пор, пока вы не будете довольны результатом и не захотите делиться им с другими разработчиками.

Опубликуйте свой плагин

Публикация нашего плагина проста и занимает всего несколько минут. Прежде чем мы добавим наш код, мы должны убедиться, что все настроено правильно.

Давайте посмотрим на файл package.json где находится вся информация, которую npm использует в своем реестре. Наш первоначальный шаблон уже позаботился о добавлении gruntplugin в список keywords , что необходимо для того, чтобы наш плагин был найден как плагин Grunt . Это момент, чтобы занять некоторое время и добавить больше ключевых слов, чтобы люди могли легко найти наш плагин.

Мы также заботимся о нашем файле README.md и предоставляем нашим будущим пользователям документацию по общему использованию нашей задачи, вариантам использования и опциям. Благодаря grunt-init у нас уже есть хороший первый черновик для работы, и мы можем отшлифовать его оттуда.

После того, как эти приготовления сделаны, мы можем опубликовать наш плагин. Если у вас еще нет учетной записи npm, вы можете создать ее на их веб-сайте или запустить npm в командной строке и настроить там все. Следующая команда попросит вас .npmrc имя пользователя и пароль и либо создать нового пользователя на npm и сохранить свои учетные данные на .npmrc либо войти в систему:

 npm adduser 

Как только вы зарегистрируетесь и войдете в систему, вы можете загрузить свой плагин в npm:

 npm publish 

Вот и все! Вся необходимая информация автоматически извлекается из файла package.json . Взгляните на плагин Grunt, который мы только что создали здесь .

Выводы

Благодаря этому руководству вы узнали, как создать плагин Grunt с нуля. Более того, если вы опубликовали его, вы теперь являетесь счастливым владельцем плагина Grunt, который доступен в Интернете и готов для использования другими веб-разработчиками. Продолжайте в том же духе, продолжайте поддерживать свой плагин и придерживайтесь тестируемой разработки.

Если вы находитесь в процессе создания плагина Grunt или уже создали его и хотите поделиться чем-то в процессе, пожалуйста, оставьте комментарий в разделе ниже. Еще раз хочу подчеркнуть, что плагин, который мы создали в этой статье, доступен на GitHub .