Fast-static — Node.js модуль сильно облегчающий жизнь

При разработке js и css файлы удобнее держать в исходном виде, а при в продакшене их необходимо минизировать и соединять. Существует несколько систем сборки, однако, пользоваться ими весьма сложно и проблематично. По крайней мере я устал от них до такой степени, что решил написать свой сборщик. Получился он очень удобным, поэтому я решил с вами им поделиться.



Другая проблема с которой я решил побороться — не удобство подключения файлов в html. Для того чтобы подключить один файл необходимо писать:

     <script type="text/javascript" src="..."></script>

Если файлов штук 20, то все это превращается в мешанину, где сложно что-то найти. При этом скрипты и css нужно подключать в разных частях страницы. И если нужно, например, bootstrap перекинуть в другую директорию, то нужно изменять пути в начале и в конце страницы. В общем я решил, что так будет намного быстрее подключать файлы:

     <use>
          file1.css
          file2.js
          dir/
               file3.js
               file4.css
     </use>

Также в use я добавил несколько приятных фич. Например, вставку текущего домена (хоста). Но песнь моя не о том.

Чтобы use тега было достаточно и не нужно было создавать файл с конфигом сборки пришлось писать свой middleware к express.

Т.е. сборка происходит «на лету»: когда браузер запрашивает файл в продакшене, то он возвращается минимизированным, хотя на диске он в исходном виде. Я подключил автоматическую компиляцию less, sass, coffeescript, jade, haml и md. Которая тоже происходит на лету.

Естественно все это не лучшим образом может сказаться на производительности продакшен сервера. Поэтому в продакшене результаты кешируются в памяти. Между делом добавил кеширование результатов после gzip (зачем процессор почем зря нагружать). Также доступно кеширование на стороне браузера (ETag). В общем получилось быстрее чем у стандартного static middleware Express/Connect и меньше грузит диск и камень.

Стандартный middleware дважды снимает статистику файла и считывает файл с диска, а потом зипует результат. Мой просто выплевывает данные из памяти.

Подключается это в несколько строк

     npm install fast-static

     var fastStatic= require('fast-static');
     app.use('/static',fastStatic.use('./static'));   // app.use('/static',app.static('./static'));

Потом вместо script/link используете тег use в html файлах.

Вот и все. Только не забывайте env менять у продашен серверов.

В общем получилась удобная система сборки.

Фичи

• Конвертирует: coffee, haml, less, jade, sass, md
• Упрощенное подключение файлов через тег use
• Автоопределение mime-type по расширению
• поддерживает gzip (кеширует gzip в памяти)
• поддерживает кеш на стороне браузера (ETag)

Когда env=production производит оптимизацию

• минимизация css, js и html
• слияние файлов
• вставляет небольшие изображения в css
• кеширует результаты в памяти

Полная документация на гитхабе: https://github.com/Hkey1/fast-static

—

UPDATE

Новая версия появился инклуд файлов в директории dir/*
Появился простой инклуд библиотек — просто добавить название и версию в use тег. Например «bootstrap 3.1.1»
Значительно ускорен кеш на стороне браузера.