Объединить и минимизировать многочисленные 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. Так как ваша страница нужна вы можете изменить свой заголовок. Поэтому всякий раз, когда вы хотите расширить свое веб-приложение, это будет менее рискованно и утомительно.

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

Это 2015 год на улице и самый простой способ ИМО использует глоток -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