Minification des fichiers CSS
bazooka07
PluXml Lead Developer, Moderator
dans Modifications
Il existe déjà beaucoup d'outils pour réduire la taille des fichiers CSS.
Mais généralement, il utilise des langages comme NodeJS, Python, Perl.
Voici un petit script en PHP qui fait presque aussi bien :
#!/usr/bin/env php
Si vous utilisez Linux ou IOS, placez le dans le dossier des fichiers CSS et changez les permissions pour le rendre executable ( "chmod a+x minify.php") et lancer le.
Pour les autres, c'est php -f minify.php
Mais généralement, il utilise des langages comme NodeJS, Python, Perl.
Voici un petit script en PHP qui fait presque aussi bien :
#!/usr/bin/env php
[== PHP ==]
<?php
const PATTERN = "%-16s %6d octets\n";
const END_OF_LINES = '@\s*(\n|\r|(?:\r\n))@';
const NO_DUPLICATE = '@\s*([\s;])\s*@';
const COMMENT = '@\/\*.*\*/@Us';
function minify($filename, $target) {
if(!file_exists($filename)) { return; }
$content = file_get_contents($filename);
file_put_contents(
$target,
preg_replace(
[
COMMENT, // must be first
END_OF_LINES,
NO_DUPLICATE,
'@\s*([:;{}()\[\]])\s*@'
],[
'',
'',
'$1',
'$1'
],
$content
)
);
}
echo "\n";
foreach(glob('*.css') as $filename) {
if(!preg_match('@\.min\.css$@', $filename)) {
printf(PATTERN, $filename, filesize($filename));
$target = preg_replace('@\.css$@', '.min.css', $filename);
minify($filename, $target);
printf(PATTERN."\n", $target, filesize($target));
}
}
?>
Si vous utilisez Linux ou IOS, placez le dans le dossier des fichiers CSS et changez les permissions pour le rendre executable ( "chmod a+x minify.php") et lancer le.
Pour les autres, c'est php -f minify.php
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
Notre temps est la seule monnaie vraie ;)
Site, Dépôt, framagit, MyShop, Factux
#mozinor président
Bonjour, c'est super comme script. Est-ce que ça ne pourrait pas devenir un plugin qui ajoute un bouton qui réduirait tous les .css d'un site (thèmes site et admin, plugins ...)?
J'aimerais profiter de ce post pour poser quelques questions.
Dans le thème (site, pas admin) par défaut de PluXml, dans le dossier css, il y a plucss.css, theme.css et print.css
En revanche, dans le header, il y a
pourquoi n'y a t-il pas plutôt
?
Et pourquoi d'ailleurs ne sont-ils pas minimisé? plucss.min.css, print.min.css et theme.min.css ?
J'ai une seconde question. A quoi sert du coup
? Est-ce que la fonction templateCss() ne pourrait pas récupérer tous les fichiers .min.css en priorité sinon .css du dossier /css qui se trouve dans le dossier du template? Si il y a un print.min.css/print.css, elle lui assigne le media="print" pour les autres, media="screen". Ce serait faisable?
Enfin, je voulais saluer la fonction cssCache() qui s'occupe de combiner tous les css des différents plugin et de les minimiser grâce à la fonction plxUtils::minify(). Est-ce qu'on ne devrait pas d'ailleurs, pour comprendre que ces fichiers sont déjà minimisé remplacer
par
Du coup, je découvre qu'elle existe. Pourquoi alors ne pas faire appel à elle pour créer les min.css des fichiers css d'un thème (si il n'existe pas) lorsqu'un utilisateur choisit un thème ou lorsqu'il sauvegarde après avoir édité un thème?
Dans ce cas, il n'y aurait plus besoin de plugin.
J'ai modifié <?php $plxShow->templateCss() ?> en <?php $plxShow->templateCss("/css") ?>
Si j'ai un template de page static-perso.php et que j'ai dans le dossier css une feuille de style static-perso.css, alors quand j'utiliserai le template static-perso.php il ajoutera automatiquement la feuille de style static-perso.css
Je viens de comprendre que templateCss() récupère le css du template associé à la catégorie/article/page consulté si il en existe un particulier. Il ne s'agit pas des css du thème. merci @cpalo
Mes remarques portent donc sur une nouvelle fonction alors... Finalement, sans doute que ce serait mieux sous forme de plugin qui scanne tous les fichiers css et les minimise.