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

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

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

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

При этом скрипты и 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


• кеширует результаты в памяти

Полная документация на гитхабе: http://ift.tt/1nK07gN

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.