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

Question

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

Мои страницы ссылки несколько CSS и JS файлы, такие как следующие:

<!-- 
    It's easier to work on smaller files during development. 
    Hence, the multiple CSS and JS files. 
--> 
<link type="text/css" rel="stylesheet" href="/css/main.css" /> 
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" /> 
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" /> 

<script type="text/javascript" src="/scripts/js/main.js"></script> 
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script> 
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script> 

Для выпуска продукта, я хотел бы объединить 3 CSS файлов в один и преуменьшать его использованием, например, YUI Compressor. Но тогда мне нужно будет обновить все страницы, которые нуждаются в этих 3 файлах, чтобы ссылаться на недавно измененный CSS. Это кажется подверженным ошибкам (например, вы удаляете и добавляете некоторые строки во многие файлы). Любой другой менее рискованный подход? Такая же проблема для JS-файлов.

Answer 1

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

Вы даже можете спросить CodeKit, чтобы выполнить «минимизацию/сжатие» на лету.

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

Answer 2

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

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

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

Answer 3

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

Check out how easy it is.

Вы можете запустить его в муравьиной задаче и, следовательно, включить его в свои сообщения/pre commit hooks, если вы используете svn/git.

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

См. this tutorial для краткого ознакомления.

UPDATE: В настоящее время люди шаг назад от пехотинца унд его предшественник «Глоток» и использовать НПМ в качестве инструмента сборки. Читайте об этом here.

Answer 4

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

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

Вы не упомянули о своей среде разработки. Вы можете видеть, что есть many compressing tools listed for different environments. И вы используете хороший инструмент i.e.YUI Compressor.

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

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

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

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

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

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

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

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

Answer 9

В моем симфони проекте я сделать что-то вроде этого

{# 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 готов к производству, я использую this script объединить все файлы CSS и заменить содержимое min.css.

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

Answer 10

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

Answer 11

Вы можете использовать модуль в 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); 

Answer 12

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

Открыть CMD в нужном месте, и только труба файлы в файл с помощью «типа»

например:

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

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

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

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 

Answer 13

Все быстрее утилиты здесь

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