При разработке js и css файлов удобнее сохранять их в исходном виде, но в продакшене их нужно сворачивать и объединять.
Существует несколько систем сборки, однако использовать их очень сложно и проблематично.
По крайней мере, они мне надоели до такой степени, что я решил написать свой сборник.
Это оказалось очень удобно, поэтому я решил поделиться этим с вами.
Еще одна проблема, которую я решил побороть — неудобство подключения файлов в html. Для того, чтобы подключить один файл нужно написать:
Если файлов 20, то все превращается в мешанину, в которой сложно что-либо найти.<script type="text/javascript" src="."></script>
В этом случае скрипты и CSS необходимо включить в разные части страницы.
А если вам нужно, например, перенести бутстрап в другой каталог, то вам нужно изменить пути в начале и в конце страницы.
В общем, я решил, что так соединить файлы будет гораздо быстрее: <use>
file1.css
file2.js
dir/
file3.js
file4.css
</use>
Я также добавил для использования несколько приятных особенностей .
Например, вставив текущий домен (хост).
Но моя песня не об этом.
Чтобы тега use было достаточно и не создавать файл с конфигом сборки, мне пришлось написать свой промежуточный софт для экспресса.
Те.
сборка происходит «на лету»: когда браузер запрашивает файл в продакшене, он возвращается минифицированным, хотя в исходном виде находится на диске.
Я включил автоматическую компиляцию less, sass, Coffeescript, Jade, Haml и md. Что тоже происходит на лету.
Естественно, все это может не лучшим образом сказаться на производительности производственного сервера.
Поэтому в производстве результаты кэшируются в памяти.
А пока добавил кеширование результатов после gzip (зачем процессор зря нагружать).
Также доступно кэширование на стороне браузера (ETag).
В целом получилось быстрее стандартного статического промежуточного программного обеспечения Express/Connect и требует меньше нагрузки на диск и камень.
Стандартное промежуточное программное обеспечение дважды берет статистику файла и считывает файл с диска, а затем архивирует результат. Мой просто выплевывает данные из памяти.
Это связано в несколько строк npm install fast-static
var fastStatic= require('fast-static');
app.use('/static',fastStatic.use('.
/static')); // app.use('/static',app.static('.
/static'));
Затем вместо скрипта/ссылки используйте тег use в html-файлах.
Вот и все.
Только не забудьте изменить env на проданных серверах.
В целом получилась удобная система сборки.
Функции
- Преобразует: кофе, хамл, меньше, нефрит, нахальство, MD
- Упрощенное подключение файлов через тег use
- Автоматическое определение mime-типа по расширению
- поддерживает gzip (кэширует gzip в памяти)
- поддерживает кэш на стороне браузера (ETag)
- минификация css, js и html
- объединение файлов
- вставляет небольшие изображения в CSS
- кэширует результаты в памяти
ОБНОВЛЯТЬ
В новой версии появились файлы в каталоге dir/*.Появилось простое включение библиотек — достаточно добавить название и версию в тег use. Например, «бутстрап 3.1.1».
Кэш на стороне браузера значительно ускорен.
Теги: #node.js #js #CSS #HAML #less #sass #jade #jade #jade #md #project build #Express #Express.js #node.js
-
Приглашаем Вас На Неделю Нлп В Яндекс.
19 Oct, 24 -
Оценка Дипломов Для Сша
19 Oct, 24 -
Единое Ядро Windows
19 Oct, 24 -
Glofiish M800 — Теперь Официально
19 Oct, 24
