Объединение и сокращение нескольких файлов CSS / JS

Ознакомьтесь с minify - он позволяет объединять несколько файлов js, css в один, просто складывая их в URL-адрес, например

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

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

Я считаю, что YUI Compressor лучший из существующих. Он минимизирует JS и CSS и даже удаляет те console.log операторы, которые люди используют для низкоуровневой отладки JavaScript.

Узнайте, насколько это просто.

Если вы используете svn / git, вы можете запустить его в задаче ant и, следовательно, включить его в свои обработчики post / pre-commit.

ОБНОВЛЕНИЕ. В настоящее время я использую grunt с элементами concat, minify и uglify. Вы можете использовать его с наблюдателем, чтобы он создавал новые миниатюрные файлы в фоновом режиме всякий раз, когда вы меняете источник. Uglify contrib не только удаляет журналы консоли, но также удаляет неиспользуемые функции и свойства.

См. это руководство для краткого обзора.

ОБНОВЛЕНИЕ. В настоящее время люди отступают от grunt и его предшественника «gulp» и используют npm в качестве инструмента сборки. Прочтите об этом здесь.

ОБНОВЛЕНИЕ. Итак, теперь люди используют yarn для запуска npm. Неудивительно; пряжа значок - кошка. Большинство современных фреймворков используют webpack для объединения ресурсов в пакеты, которые затем также заботятся о минификация.

Мне нужно обновить все страницы, которым нужны эти 3 файла, чтобы они ссылались на только что уменьшенный CSS.

Во-первых, я бы сказал, что у вас должен быть общий заголовок. Таким образом, нет необходимости постоянно менять все заголовки, когда это необходимо. Хорошая практика - иметь один заголовок или 2-3. Так что по мере необходимости вы можете изменить заголовок. Так что всякий раз, когда вы захотите расширить свое веб-приложение, это будет менее рискованно и утомительно.

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

В итоге я использовал CodeKit для объединения моих файлов CSS и JS. Функция, которую я считаю действительно полезной, - это возможность выполнять конкатенацию при сохранении файла; потому что он отслеживает соответствующие ресурсы CSS / JS. Как только я их правильно скомбинировал, например к 1 файлам CSS и 1 JS, все остальные файлы просто могут ссылаться на эти 2.

Вы даже можете попросить CodeKit выполнить минификацию / сжатие на лету.

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

Совет для пользователей Windows, если вы хотите только объединить файлы:

Откройте cmd в желаемом месте и просто перенаправьте свои файлы в файл, используя "тип".

ex:

type .\scripts\*.js >> .\combined.js

Если порядок ваших скриптов важен, вы должны явно ввести файлы в желаемом порядке.

Я использую this в файле bat для моих проектов angular / bootstrap

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

На улице 2015 год, и мне проще всего использовать gulp - http://gulpjs.com/. Уменьшить код с помощью gulp-uglify для js-скриптов и gulp-minify-css для css очень просто. Gulp определенно стоит попробовать

Я не вижу, чтобы вы упоминали систему управления контентом (Wordpress, Joomla, Drupal и т. Д.), Но если вы используете какую-либо популярную CMS, у всех них есть плагины / модули (также бесплатные), которые минимизируют и кэшируют ваши css и js.

Использование плагина дает вам возможность сохранить несжатые версии доступными для редактирования, а затем, когда изменения внесены, плагин автоматически включает ваши изменения и повторно сжимает файл. Просто убедитесь, что вы выбрали плагин, который позволит вам исключать файлы (например, пользовательский файл js), если он что-то сломает.

Раньше я пытался поддерживать эти файлы вручную, и это всегда превращалось в кошмар обслуживания. Удачи, надеюсь, это помогло.

Для людей, которым нужно что-то более легкое и гибкое, я создал сегодня js.sh, чтобы решить эту проблему. проблема. Это простой инструмент командной строки, ориентированный на файлы JS, который можно легко изменить для обработки файлов CSS. Преимущества:

• Легко настраивается для использования несколькими разработчиками в проекте
• Объединяет файлы JS в порядке, указанном в script_order.txt
• Сжимает их с помощью компилятора Google Closure
• По возможности разбивает JS на блоки по 25 КБ, поскольку iPhone не кэширует ничего больше 25 КБ.
• Создает небольшой файл PHP с тегами <script>, которые вы можете включить, где это необходимо.
• Использование: js.sh -u yourname

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

Первый шаг оптимизации - минимизация файлов. (Я настоятельно рекомендую GULP для минимизации и оптимизации. Простое решение для просмотра, установки и всех файлов сжимаются сразу. Поддерживает все CSS, JS, less, sass и т. д.)

ИЛИ Старое школьное решение:

1) Как правило, в качестве процесса оптимизации для оптимизации производительности сайта попробуйте объединить весь CSS в один файл и сжать файл, используя Компас. Таким образом, ваши многочисленные запросы к статическому CSS будут заменены одним.

2) Проблема с несколькими JS, которую вы можете решить с помощью CDN (или размещенных библиотек Google), чтобы запросы отправлялись на другой сервер, а не ваш. Таким образом, сервер не ждет завершения предыдущего запроса перед отправкой следующего.

3) Если у вас есть собственный локально сохраненный JavaScript, минимизируйте каждый файл с помощью подключаемого модуля Brackets "Сжатие JavaScript". По сути, сжатие JavsScript выполняется одним щелчком мыши. Brackets - это бесплатный редактор, созданный для CSS и JS, но его можно использовать для PHP и другие языки. Существует множество плагинов, предназначенных как для интерфейсных, так и для серверных разработчиков. В общем, все эти (пока несколько) команды выполняются "одним щелчком". Кстати, скобки заменили мой очень дорогой Dreamweaver;)

3) Попробуйте использовать такие инструменты, как Sass, Compass, less, чтобы минимизировать CSS.

Примечание. Даже без использования SASS или переменных, ваш CSS будет сжат (просто просто используйте чистый CSS и команда Compass "смотреть" сожмет его за вас).

Надеюсь, это поможет!

Если вы выполняете какую-либо предварительную обработку файлов, которые вы обслуживаете, вы, вероятно, захотите настроить правильную систему сборки (например, Makefile). Таким образом, у вас есть исходные файлы без дублирования, и всякий раз, когда вы вносите изменения, вы запускаете make, и он обновляет все автоматически сгенерированные файлы. Если система сборки уже существует, узнайте, как она работает, и используйте ее. Если нет, вам нужно добавить его.

Итак, сначала выясните, как объединить и минимизировать ваши файлы из командной строки (это описано в документации YUICompressor). Назначьте каталог для автоматически сгенерированного материала, отдельный от материала, над которым вы работаете, но доступный для веб-сервера, и выводите его туда, например, gen / scripts / Combined.js. Поместите команды, которые вы использовали, в Makefile и повторно запускайте make каждый раз, когда вы внесли изменения и хотите, чтобы они вступили в силу. Затем обновите заголовки в других файлах, чтобы они указывали на объединенные и уменьшенные файлы.

В моем проекте на Symfony я делаю что-то вроде этого

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

Когда версия для разработчиков готова к производству, я использую этот сценарий, чтобы объединить все файлы css и заменить содержимое min.css.

Но это решение работает только в том случае, если одни и те же файлы css включены на все страницы.

Вы можете использовать узел узла cssmin, созданный на основе известного компрессора YUI.

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);