Объединение и минимизация нескольких файлов CSS / JS

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

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

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

Я думаю Юи компрессора - Это лучшее, что есть. Он минимизирует JS и CSS, и он даже удаляет эти console.log операторы, которые люди используют для отладки JavaScript низкого уровня.

проверьте, как легко это.

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

обновление: в настоящее время я использую grunt с concat, minify & uglify вклады. Вы можете использовать его с наблюдателем, чтобы он создавал новые мини-файлы в фоновом режиме при изменении источника. Uglify contrib не только обнажает журналы консоли, он также обнажает неиспользуемые функции и свойства.

посмотреть в этом уроке для краткого экскурса.

обновление: В настоящее время люди отступают от grunt und его предшественника "gulp" и используют npm в качестве инструмента сборки. Читайте об этом здесь.

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

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

вы не упомянули о своем развитии окружающая среда. Вы можете видеть, что есть многие инструменты сжатия, перечисленные для различных сред. И вы используете хороший инструмент i.e.Юи компрессор.

Это 2015 год на улице, и самый простой способ imo использует gulp -http://gulpjs.com/. Минимизация кода с помощью глоток-уродовать для сценариев js и gulp-minify-css для css очень просто. залпом определенно стоит попробовать

Быстрый совет для пользователей windows, Если вы хотите только конкат файлов:

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

ex:

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

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

Я использую этой в файле bat для моих угловых / загрузочных проектов

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

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

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

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

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

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

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

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

или решение старой школы:

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

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

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

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

Примечание: даже без использования Сасс смешивание или переменные ваш CSS будет сжат (просто используйте чистый CSS и компас команда "watch"будет сжимать его для вас).

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

Если вы выполняете предварительную обработку файлов, которые вы обслуживаете, вы, вероятно, хотите настроить правильную систему сборки (например, 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 %}

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

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

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

$ 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);

все более быстрые утилиты находятся здесь

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json