Kombinieren und minimieren Sie mehrere CSS / JS-Dateien

Ich versuche, die Leistung einer Site durch Konsolidieren und Komprimieren der CSS- und JS-Dateien zu optimieren. Meine Frage bezieht sich eher auf die (konkreten) Schritte, wie dies in einer realen Situation erreicht werden kann (sollte aber auch für andere Entwickler typisch sein).

Meine Seite verweist auf mehrere CSS- und JS-Dateien wie die folgenden:

<!--
  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>

Für die Produktionsversion möchte ich die 3 CSS-Dateien zu einer kombinieren und sie beispielsweise mit YUI Compressor minimieren . Aber dann müsste ich alle Seiten aktualisieren, die diese 3 Dateien benötigen, um auf das neu minimierte CSS zu verweisen. Dies scheint fehleranfällig zu sein (z. B. entfernen und fügen Sie einige Zeilen in vielen Dateien hinzu). Irgendein anderer weniger riskanter Ansatz? Das gleiche Problem für die JS-Dateien.

Check out Minify - Sie können mehrere JS- und CSS-Dateien zu einer kombinieren, indem Sie sie einfach in eine URL stapeln, z

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

Wir haben es jahrelang benutzt und es macht einen tollen Job und macht es im laufenden Betrieb (keine Notwendigkeit, Dateien zu bearbeiten).

Ich denke, der YUI-Kompressor ist der beste, den es gibt. Es minimiert JS und CSS und entfernt sogar die console.logAnweisungen, die für das JavaScript-Debugging auf niedriger Ebene verwendet werden.

Überprüfen Sie, wie einfach es ist .

Sie können es in einer Ant-Task starten und es daher in Ihre Post / Pre-Commit-Hooks aufnehmen, wenn Sie svn / git verwenden.

UPDATE: Heutzutage benutze ich Grunzen mit den Beiträgen concat, minify & uglify. Sie können es mit einem Watcher verwenden, damit im Hintergrund neue verkleinerte Dateien erstellt werden, wenn Sie Ihre Quelle ändern. Mit uglify Contrib werden nicht nur Konsolenprotokolle entfernt, sondern auch nicht verwendete Funktionen und Eigenschaften.

In diesem Tutorial finden Sie einen kurzen Einblick.

UPDATE: Heutzutage treten die Leute vom Grunzen und seinem Vorgänger "gulp" zurück und verwenden npm als Build-Tool. Lesen Sie hier nach .

UPDATE: Jetzt verwenden die Leute Garn , um npm zu laufen. Kein Wunder; Garn Symbol ist eine Katze. Die meisten aktuellen Frameworks webpack die Ressourcen in Paketen zu bündeln, die dann auch Pflege nimmt minification .

Ich müsste alle Seiten aktualisieren, die diese 3 Dateien benötigen, um auf das neu minimierte CSS zu verweisen.

Erstens würde ich sagen, Sie sollten einen gemeinsamen Header haben. Es müssen also nicht immer alle Header geändert werden, wenn dies erforderlich ist. Es ist eine gute Praxis, einen einzelnen Header oder 2-3 zu haben. Je nach Bedarf Ihrer Seite können Sie Ihren Header ändern. Wann immer Sie Ihre Web-App erweitern möchten, ist dies weniger riskant und langwierig.

Sie haben Ihre Entwicklungsumgebungen nicht erwähnt. Sie können sehen, dass viele Komprimierungswerkzeuge für verschiedene Umgebungen aufgelistet sind . Und Sie verwenden ein gutes Tool, dh YUI Compressor.

Am Ende habe ich CodeKit verwendet, um meine CSS- und JS-Dateien zu verketten. Die Funktion, die ich sehr nützlich finde, ist die Möglichkeit, die Verkettung beim Speichern von Dateien durchzuführen. weil es die jeweiligen CSS / JS-Assets überwacht. Sobald ich sie richtig kombiniert habe, z. B. zu 1 CSS- und 1 JS-Dateien, können alle anderen Dateien einfach auf diese 2 verweisen.

Sie können CodeKit sogar bitten, die Minimierung / Komprimierung im laufenden Betrieb durchzuführen.

Haftungsausschluss: Ich bin in keiner Weise mit CodeKit verbunden. Ich habe es zufällig im Web gefunden und es hat als großartiges Werkzeug in meinem Entwicklungsprozess gedient. Es kommt auch mit guten Updates, seit ich es vor mehr als einem Jahr zum ersten Mal verwendet habe.

Schneller Tipp für Windows-Benutzer, wenn Sie nur Dateien zusammenfassen möchten:

Öffnen Sie ein cmd an der gewünschten Stelle und leiten Sie Ihre Dateien einfach mit " type " an eine Datei weiter.

Ex:

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

Wenn die Reihenfolge Ihrer Skripte wichtig ist, müssen Sie die Dateien explizit in der gewünschten Reihenfolge eingeben .

Ich verwende dies in einer Bat-Datei für meine Winkel- / Bootstrap-Projekte

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

Es ist 2015 auf der Straße und der einfachste Weg imo ist die Verwendung von gulp - http://gulpjs.com/ . Das Minimieren von Code mit gulp-uglify für js-Skripte und gulp-minify-css für css ist sehr einfach. Gulp ist definitiv einen Versuch wert

Ich sehe nicht, dass Sie ein Content-Management-System (Wordpress, Joomla, Drupal usw.) erwähnen, aber wenn Sie ein beliebtes CMS verwenden, stehen alle Plugins / Module zur Verfügung (auch kostenlose Optionen), die Ihre CSS und JS minimieren und zwischenspeichern.

Durch die Verwendung eines Plugins können Sie die unkomprimierten Versionen für die Bearbeitung verfügbar halten. Wenn Änderungen vorgenommen werden, enthält das Plugin automatisch Ihre Änderungen und komprimiert die Datei erneut. Stellen Sie einfach sicher, dass Sie ein Plugin auswählen, mit dem Sie Dateien (z. B. eine benutzerdefinierte JS-Datei) ausschließen können, falls etwas kaputt geht.

Ich habe in der Vergangenheit versucht, diese Dateien manuell zu speichern, und es wird immer zu einem Alptraum für die Wartung. Viel Glück, hoffe das hat geholfen.

Für Leute, die etwas Leichteres und Flexibleres wollen, habe ich heute js.sh erstellt , um dieses Problem anzugehen. Es ist ein einfaches Befehlszeilentool für JS-Dateien, das leicht geändert werden kann, um auch CSS-Dateien zu verwalten. Leistungen:

• Einfach konfigurierbar für die Verwendung durch mehrere Entwickler in einem Projekt
• Kombiniert JS-Dateien in der in script_order.txt angegebenen Reihenfolge
• Komprimiert sie mit dem Closure Compiler von Google
• Teilt JS nach Möglichkeit in Blöcke mit <25 KB auf, da das iPhone nichts größer als 25 KB zwischenspeichert
• Erzeugt eine kleine PHP-Datei mit <script>Tags, die Sie gegebenenfalls einfügen können
• Verwendung: js.sh -u yourname

Es könnte einige Verbesserungen gebrauchen, aber es ist besser für meinen Anwendungsfall als alle anderen Lösungen, die ich bisher gesehen habe.

Der erste Schritt der Optimierung ist die Dateiminimierung. (Ich empfehle GULP dringend zur Minimierung und Optimierung. Die einfache Überwachungslösung, die Installation und alle Dateien werden gleichzeitig komprimiert. Unterstützt alle CSS-, JS-, Less-, Sass- usw.)

ODER Old-School-Lösung:

1) Versuchen Sie im Allgemeinen als Optimierungsprozess, um die Leistung einer Site zu optimieren, alle CSS in einer Datei zusammenzuführen und die Datei mithilfe von Compass zu komprimieren . Auf diese Weise werden Ihre mehrfachen Anforderungen an statisches CSS durch einzelne ersetzt.

2) Problem mit mehreren JS, das Sie mithilfe von CDN (oder von Google gehosteten Bibliotheken) lösen können, sodass Anforderungen an einen anderen Server als Ihren gesendet werden. Auf diese Weise wartet der Server nicht auf den Abschluss der vorherigen Anforderung, bevor er die nächste sendet.

3) Wenn Sie Ihr eigenes lokal gespeichertes JavaScript haben, minimieren Sie jede Datei mit dem Brackets- Plugin "Compress JavaScript". Es ist im Grunde ein Klick, um JavsScript zu komprimieren. Brackets ist ein kostenloser Editor für CSS und JS, der jedoch für PHP und andere Sprachen verwendet werden kann. Es stehen zahlreiche Plugins für Front-End- und Back-End-Entwickler zur Auswahl. Im Allgemeinen "ein Klick", um alle diese (bisher mehreren) Befehle auszuführen. Übrigens haben Brackets meinen sehr teuren Dreamweaver ersetzt;)

3) Versuchen Sie, Tools wie Sass , Compass und weniger zu verwenden, um Ihr CSS zu minimieren.

Hinweis: Auch ohne SASS- Mixing oder Variablen wird Ihr CSS komprimiert (verwenden Sie einfach reines CSS und der Compass- Befehl "watch" komprimiert es für Sie).

Ich hoffe das hilft!

Wenn Sie die von Ihnen bereitgestellten Dateien vorverarbeiten, möchten Sie wahrscheinlich ein geeignetes Build-System (z. B. ein Makefile) einrichten. Auf diese Weise haben Sie einige Quelldateien ohne Duplizierung. Wenn Sie eine Änderung vornehmen, führen Sie 'make' aus und alle automatisch generierten Dateien werden auf den neuesten Stand gebracht. Wenn bereits ein Build-System vorhanden ist, lernen Sie, wie es funktioniert, und verwenden Sie es. Wenn nicht, müssen Sie eine hinzufügen.

Stellen Sie zunächst fest, wie Sie Ihre Dateien über die Befehlszeile kombinieren und minimieren können (die YUICompressor-Dokumentation behandelt dies). Legen Sie ein Verzeichnis für automatisch generierte Inhalte fest, das von den von Ihnen bearbeiteten, aber für den Webserver zugänglichen Inhalten getrennt ist, und geben Sie es dort aus, z. B. gen / scripts / kombiniert.js. Fügen Sie die von Ihnen verwendeten Befehle in ein Makefile ein und führen Sie 'make' jedes Mal erneut aus, wenn Sie eine Änderung vorgenommen haben und möchten, dass diese wirksam wird. Aktualisieren Sie dann die Header in anderen Dateien, um auf die kombinierten und minimierten Dateien zu verweisen.

In meinem Symfony-Projekt mache ich so etwas

{# 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 %}

Wenn die Entwicklungsversion für die Produktion bereit ist, verwende ich dieses Skript , um alle CSS-Dateien zu kombinieren und den Inhalt von zu ersetzen min.css.

Diese Lösung funktioniert jedoch nur, wenn auf allen Seiten dieselben CSS-Dateien enthalten sind.

Sie können das cssmin- Knotenmodul verwenden, das aus dem berühmten YUI-Kompressor erstellt wurde

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

Alle schnelleren Dienstprogramme finden Sie hier

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