Создание gulp плагина на примере построения графа зависимостей для модулей Angular JS Хабрахабр. Предисловие. В данной статье я поделюсь с вами опытом, как быстро и безболезненно создавать простые плагины для gulp. Статья ориентирована на таких же чайников, как и я. На тех, кто до сих пор лишь использовал готовые плоды gulp, срывая их с великого Древа Познания NPM, и не имел серьезного опыта работы с Node JS и его стримами. Я не буду отвечать на вопросы вида А зачем создавать свои плагины, если уже написано все, что только возможно. Придет время, и вам за полчаса нужно будет написать что то очень специфичное для вашего проекта. Перерыв весь npm, вы найдете один заброшенный плагин с убогим функционалом, автор которого недоступен, код ужасен и так далее. А может быть, это будет настолько специфичная задача, что вы не найдете абсолютно ничего. Такой задачей для меня стала визуализация большого проекта, использующего Angular JS. Невозможно Создать Graphbuilder' title='Невозможно Создать Graphbuilder' />Было огромное количество angular модулей, связи между которыми были для меня уже не столь очевидными. Плюс мне хотелось видеть диверсантов модули, которые каким либо образом нарушали общую концепцию проекта например, лезли в другой модуль не через провайдера, а напрямую. Поискав, я нашел такое решение своей задачи. В принципе, запускать grunt плагины в gulp достаточно просто, но реализация в этом плагине меня не слишком впечатлила. Мне не хотелось использовать сторонние программы, а именно graphviz в качестве средства визуализации графа. Плюс ко всему, кто знает, что мне потребуется еще, а зависимость от сторонних библиотек всегда налагает ограничения. Если читателя интересует лишь этот плагин, а не сама статья, то вот ссылка на проект на github и на npm. Невозможно Создать Graphbuilder' title='Невозможно Создать Graphbuilder' />Всем остальным добро пожаловать под кат. С чего начать Для успешной разработки достаточно прочитать титульник и гайдлайны. Музыка Пәнінен Тақырыптық Күнтізбелік Жоспар 2014 2015. Можно обойтись и без последних, но если в будущем вы планируете выкладывать свой модуль в публичный npm, то чтобы не собирать кирпичи на свою голову, советую не проходить мимо гайдлайнов. Краткий конспект философии gulp плагинов ваш плагин всегда принимает набор Vinyl объектовваш плагин всегда должен отдавать набор Vinyl объектов вы можете этого и не делать, но с результатом вашего плагина потом невозможно будет работать другим плагинам. Это обязательно выстрелитчто за винил Vinyl file object в простонародье просто файл. В свойстве path хранит filename полный путь до файла, в свойстве contents буфер или стрим с содержанием файланикогда не пишите плагины, которые будут делать то же самое, что и существующие node пакеты. Вы попадете в блэклист. И вполне справедливо. Плюс ко всему разработчики советуют ознакомиться с хорошо написанными простыми плагинами. Я бы советовал посмотреть на код gulp replace. Реализуем свои идеи. Я приведу наиболее устоявшийся шаблон построения gulp плагинов, который используется в большинстве хороших плагинов. Невозможно Создать Graphbuilder' title='Невозможно Создать Graphbuilder' />Детальное описание реализации моей задачи не есть цель данной статьи. Основная цель в том, чтобы каждый мог быстро въехать на примере и пойти создавать свой плагин. Создать себе проблему и с доблестью ее победить. Что там грузит GraphBuilder знает только GraphBuilder ну или показать. Я не буду отвечать на вопросы вида А зачем создавать свои. Создание стартового фрейма. В общем случае невозможно автоматически вывести все корректные аннотация. PhpStorm3 среда разработки для создания Webприложений на PHP. Компонент Control Flow Graph Builder отвечает за построение графа потока. Создать и проинициализировать Capture Graph Builder. Дело в том, что в контексте устройства GDI невозможно невозможно использовать. Итак, начнм. Предполагается, что node js уже стоит в системе глобально. Main файл проекта пусть будет index. После заполнения основной информации, устанавливаем следующееnpm install save through. Первый плагин значительно упростит обработку vinyl стримов. Второй пригодится для генерации ошибок плагином. Третий пригодится, если вы будете создавать новые vinyl файлы, на основе входных файлов. В моей задаче он пригодится. Займемся проектированием. Итак, я хочу получить два файла. Первый это описание графа в формате dot для поддержки graphviz, если вдруг что. Второй это html файл, открыв который я увижу красивый граф, нарисованный с помощью d. Итого в моей задаче есть 3 основных действия получить массив всех ангуляр модулей объявленных в файлах, которые примет в себя плагинсоздать. Создаем index. js, чистый как холст, и бросаем на него побольше красок. Modules. Reader require. Graph. Builder require. Graph. Visualizer require. Но если вы планируете как в моей задаче генерировать новые файлы на основе входных, то вам обязательно потребуется функция end. Stream, где стрим еще не закрыт и вы сможете добавить ваши файлы в пустой стрим. Так как основная цель статьи научиться писать плагины gulp на конкретном примере, то я не буду приводить здесь реализации Modules. Reader, Graph. Builder и Graph. Visualizaer, являющиеся специфичными для моей конкретной задачи. Если кого то заинтересует их реализация, то добро пожаловать на гитхаб. Результат работы плагина вот такой вот приятный граф проекта на d.