Метка «npm»

В этой публикации речь пойдет о тех самых файлах favicon.ico, по которым можно быстро узнавать сайт в выдаче поисковых систем или среди горы закладок в браузере. Для своих проектов у меня встала такая задача, но в opensorce готовых решений я найти не смог. Возможно, плохо искал, или, может, такие решения уже появились, но во всяком случае я, как всякий нормальный программист, написал свое решение. Со временем его немного подморофетил и выложил в opensource, собственно, о нем я сейчас и хочу рассказать.

Мое решение написано для nodejs и системы сборки grunt и выложено в npm, пакет называется grunt-favicon. Расширение представляет из себя задачу для grunt, которое из любого графического формата может делать иконки для сайта. Читать полностью »

Проблема

Однажды, в ходе переписывания большого проекта, возникла необходимость улучшить механизм кастомизации html шаблонов под разные версии нашего web-приложения. В старой версии кастомизация выглядела подобным образом:

{{if app.version==versions.main}}
<!--один html код-->
{{else if app.version==versions.custom1}}
<!--другой html код-->
{{else if app.version==versions.custom2}}
<!--и ещё html код-->
{{endif}}

И подобной лапшой был пронизан весь проект. Такой код сложно поддерживать и изменять, при активном использовании шаблоны превращаются в непонятную кашу, где бизнес логика отображения отдельных блоков переплетается с кастомизацией под разные версии.

Привыкнув к удобным методам управления версиями приложения с помощью инъекции зависимостей, когда в зависимости от версии используются разные реализации интерфейсов, я решил изобрести свой велосипед для XSLT-подобного управления версиями html файлов: grunt-html-inheritance. Он позволяет подменять кусочки базового html-файла с помощью маленьких патчей.
Читать полностью »

Доброго времени суток, читатели! В этом цикле статей я хочу описать опыт создания генератора для scaffolding системы Yeoman. Прежде всего, я был немного удивлён тем, что данная система и работа с ней не были описаны на хабре, разве что одно маленькое упоминание из далекого 2012 года: Yeoman.io. Как я уже написал выше, в данном цикле статей я буду рассматривать поэтапное создание yeoman-генератора для ваших проектов.
Читать полностью »

image

Установка пакетов

Все знают

# Устанавливает пакет express
npm install express

Какие варианты еще есть?

Читать полностью »

Привет, Друзья!

Я просто хотел поделиться с вами простым проектом, который, надеюсь, поможет сохранить несколько минут при создании очередного node.js пакета. Вот все, что сделает проект, после набора в командной строке yo n:

1. Запустит «npm init»
2. На основе ваших ответов из package.json, создаст файл с лицензией, readme, начальный файл и включит тестовый фреймворк.
3. Создаст и опубликует проект на GitHub'e.

А вот и видео всего описанного выше в действии:

Исходники на гитхабе: github.com/anvaka/generator-n

Читать полностью »

Вступление

За время существования Дневник.ру (а это более 4-х лет) скопился огромный объем JavaScript кода: часть находилась в отдельном проекте в виде подключаемых файлов, часть определялась прямо на разметке контролов, а часть собиралась прямо в code-behind при помощи StringBuilder. К этому прибавлялись:

  • растущее количество HTTP запросов для получения статичного контента – так, например, на всех страницах только в теге <head> загружалось 11 JavaScript файлов;
  • глобальные переменные, которые иногда перекрывали друг друга;

Решив, что с этим пора что-то делать, мы поставили себе первоочередную задачу: вынести все подключаемые по отдельности файлы из тега в один минифицированный пакет. При этом код делился на сторонний и «наш», который планировалось проверять каким-то синтаксическим анализатором.

В этой статье мы расскажем вам о том, как решили эту задачу, и, разумеется, не умолчим о проблемах, с которыми при этом столкнулись.
Читать полностью »

Недавно я задался вопросом поиска инструментария для разработки мобильных приложений на html/css. Из требований были: доступность, легковесность, простота настройки. Выбор пал на встроенный Node менеджер NPM. NPM содержит
инструментарий для базовых тасков типа install и запуска пользовательских скриптов. Также NPM не такой громоздкий, как Grunt и не требует адаптации модулей под себя, т.к. запускает модули с командной строки.

Читать полностью »

Недавно я задался вопросом поиска инструментария для разработки мобильных приложений на html/css. Из требований были: доступность, легковесность, простота настройки. Выбор пал на встроенный Node менеджер NPM. NPM содержит
инструментарий для базовых тасков типа install и запуска пользовательских скриптов. Также NPM не такой громоздкий, как Grunt и не требует адаптации модулей под себя, т.к. запускает модули с командной строки.

Читать полностью »

в 5:45, , рубрики: node.js, npm, метки: ,

Создание npm пакета

Типичная ситуация — в проекте существует некий модуль. Модуль развивается, становится самостоятельным элементом и копируется в другой проект. Потом еще один проект. И еще.

В каждом проекте модуль обновляется и улучшается, и, в какой-то момент, становится не понятно, где актуальная версия.

Да ладно, «не понятно где актуальная версия»! Вполне возможно, что в каждом проекте у модуля будут свои модификации, в которые будет достаточно сложно привести в порядок для использования в следующем проекте.

Вполне можно ограничиться созданием отдельного репозитория для модуля, например на GitHub или Bitbucket. Но добавлять репозиторий как субмодуль для GIT — это путь к приключениям.

Можно пойти дальше, и создать на основе такого модуля npm-пакет.

Работать с такими пакетами очень просто. Установить npm-пакет можно с помощью команды npm install, а обновить с помощью npm update.
Читать полностью »

Что такое GruntJS

Большинство JS разработчиков уже используют какие-то инструменты компоновки для своих разработок, даже если не знают или не используют этот термин. Они объединяют файлы при разработке, уменьшают код JavaScript-а, чтобы ускорить загрузку страниц и конвертировать Sass, или уменьшают количество файлов в CSS для браузера, и много чего другого. Чаще всего это разные инструменты, что есть не очень удобно.

Grunt помогает управлять всеми этими шагами в одном месте и организовать сторонние компоненты.
Читать полностью »