Réduire efficacement CSS et JS dans CodeIgniter efficacement

Donc je suis en train de travailler sur un projet en utilisant le framework PHP CodeIgniter (http://ellislab.com/codeigniter) et à l'intérieur, nous utilisons beaucoup de différents fichiers CSS/JS qui sont appelés dans notre en-tête.

J'ai utilisé le Rapetisser l'outil avant sur les sites WordPress et d'autres projets, et couru à travers cette bibliothèque pour CodeIgniter sur GitHub (https://github.com/ericbarnes/ci-minify) et pensé que je pourrais l'utiliser sur mon projet.

Il travaille tous très bien et dandy, mais malheureusement je suis la compression donc beaucoup de CSS et de JS fichiers, le temps que la page se charge, il aurait été plus rapide si je n'avais pas utilisé.

Voici à quoi ressemble le code dans mon controller:

    //minify css
    $cssfiles = array('assets/css/normalize.css', 'assets/css/hook-new.css', 'assets/css/hook.css', 'assets/css/components.css', 'assets/css/rtl.css', 'assets/css/global.css', 'assets/css/body.css', 'assets/css/mediaqueries.css', 'assets/select2-3.4.3/select2.css', 'assets/jquery_bootstrap/css/custom-theme/jquery-ui-1.9.2.custom.css');
    $cssfile = $this->minify->combine_files($cssfiles);
    $csscontents = $this->minify->css->min($cssfile);
    $this->minify->save_file($csscontents, 'assets/css/all.css');

    //minify js
    $jsfiles = array('assets/js/application/js_config.js', 'assets/js/bootstrap.min.js', 'assets/js/custom.js', 'assets/select2-3.4.3/select2.js', 'assets/js/startup.js', 'assets/ckeditor/ckeditor.js', 'assets/js/jquery.validationEngine-en.js', 'assets/js/jquery.validationEngine.js', 'assets/js/scripts.js', 'assets/js/application/js_timer.js');
    $jsfile = $this->minify->combine_files($jsfiles);
    $jscontents = $this->minify->js->min($jsfile);
    $this->minify->save_file($jscontents, 'assets/js/all.js');

Donc je vais prendre un de ces grands tableaux de CSS et de JS fichiers, compresser, puis de les enregistrer un fichier de grande taille. Mais est-il une meilleure et plus efficace de le faire?

Je sais que je pourrais combiner à la main, mais quand je suis en train de travailler sur les choses, j'ai massive des fichiers à parcourir. Non seulement cela, mais j'aime Rapetisser la capacité de se débarrasser de l'espace blanc inutile et vraiment condenser le code.

Donc des idées sur comment je peux accomplir efficacement cette?

Merci!

source d'informationauteur Keenan Payne

Pourquoi ne pas utiliser Grunt? Vous pourriez mettre en place quelques tâches à concaténer et minifier les fichiers JavaScript. Je l'ai fait moi-même pour un CodeIgniter projet et cela a bien fonctionné. Voici un tutoriel.

Grunt est un Nœud.js-en fonction de l'outil, mais depuis que vous feriez le créer sur votre machine de développement, cela ne devrait pas être un problème, vous n'aurez pas besoin d'Nœud sur le serveur. L'idée est qu'avant d'engager vos modifications, vous exécutez la tâche de génération qui concatène et minifies votre JavaScript et CSS. Ensuite, votre livraison comprend les fichiers minifiés et vous pousser vers le serveur.

Voici un Gruntfile j'ai utilisé pour ma CodeIgniter projet:

module.exports = function(grunt) {

    grunt.initConfig({
        concat: {
            dist: {
                src: ['static/bower_components/skeleton/stylesheets/*.css', 'static/css/style.css'],
                dest: 'static/css/main.css'
                }
            },
        uglify: {
            dist: {
                src: 'static/js/main.js',
                dest: 'static/js/main.min.js'
                }
            },
        cssmin: {
            dist: {
                src: 'static/css/main.css',
                dest: 'static/css/main.min.css'
                }
            }
        });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('build', ['concat', 'uglify', 'cssmin']);
};

Et de l'emballage.fichier json:

{
  "name": "blah",
  "version": "0.0.1",
  "description": "A project",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-sass": "~0.5.0",
    "grunt-contrib-compass": "~0.6.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-contrib-cssmin": "~0.6.2",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-contrib-jst": "~0.5.1",
    "grunt-contrib-jshint": "~0.6.4",
    "grunt-contrib-uglify": "~0.2.4",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-csslint": "~0.1.2",
    "grunt-contrib-compress": "~0.5.2",
    "grunt-contrib-handlebars": "~0.5.11",
    "grunt-contrib-jade": "~0.8.0",
    "grunt-contrib-stylus": "~0.8.0",
    "grunt-contrib-jasmine": "~0.5.2",
    "grunt-contrib-qunit": "~0.3.0",
    "grunt-contrib-imagemin": "~0.3.0",
    "grunt-contrib-less": "~0.7.0",
    "grunt-contrib-nodeunit": "~0.2.1",
    "grunt-contrib-yuidoc": "~0.5.0",
    "grunt-contrib": "~0.8.0"
  },
  "author": "My Name",
  "license": "licensename"
}

1

Ma solution personnelle depuis que j'utilise git et crochet événements, serait d'avoir un php contrôleur de rendre cette css et le fichier js à pousser et tirer. Cela signifie que, lorsque vous appliquez les nouvelles données, un crochet exécute ce script php et rerender le fichier une fois.

Dans le crochet script bash, lancer quelque chose comme php /var/www/index.php tool/minify pour exécuter le contrôleur du script.

Semble comme une solution idéale, puisque le serveur seulement ce que lorsque c'est vraiment nécessaire. Si vous avez besoin de faire un peu à la volée les tests, il suffit de lancer le rendu de fichiers minifiés une fois par contrôleur lorsque vous mettez à jour une feuille css ou js fichiers manuellement.
- git crochets
0

J'ai eu le même problème, besoin d'un JS/CSS minifier que 1) travaille de concert avec mon template parser, 2) comporte toujours certains fichiers minifiés et 3) ont la possibilité d'ajouter des fichiers minifiés si nécessaire.

La solution: https://github.com/robinwo/codeigniter-templates-minify (appuyer sur https://github.com/slav123/CodeIgniter-minify).

Fichier sont minifiés à la volée, et une seule fois (sauf si vous forcez un rafraîchissement).
0

Tout juste de terminer cette bibliothèque pour mon nouveau site web. Je l'ai mis sur Github, il peut permet.

HTML /CSS /Javascript Minification Bibliothèque

https://github.com/terrylinooo/CodeIgniter-Minifier
0

Voici quelque chose que vous pourriez être intéressé, j'ai écrit cette minifying (uglifying), basé sur la bibliothèque sur Matthias Mullie travail sur minifier.

Bibliothèque: CodeIgniter Uglify

Installation

Pour installer cette classe, il suffit de télécharger le src contenu du dossier de dépôt github à application/libraries. Puis charger la classe à l'aide de CodeIgniter la bibliothèque du chargeur:
```
$this->load->library("ugly/ugly");
```
Exemples D'Utilisation:
```
//minifying single string of code
//or single file
$result = $this->ugly->css("code goes here");
$result = $this->ugly->js("code goes here")
$result = $this->ugly->js("path/to/file")

//minifying multiple strings or files
$this->ugly->group_start("js");
//or $this->ugly->group_start("css");
$this->ugly->group_add("path/to/file");
$this->ugly->group_add("some code as string");
$result = $this->ugly->group_end();
```
Maintenant, vous pouvez enregistrer le résultat dans un nouveau fichier, ou echo, ou ce que vous voulez.
Notes:
- Vous pouvez également passer un tableau de fichiers:
  
  $this->ugly->group_add( array("file1","file2","file2") );.
- Vous pouvez également passer des ressources à la group_start méthode:
  
  $this->ugly->group_start( array("file1","file2","file2") );.
0

Mec....grunt. il permettra de sauver votre vie. Regardez votre sass/pouvez/js fichiers pour les modifications et auto minifier et concat dans un js et un fichier css. Il est étonnant de voir combien il permettra d'améliorer votre temps de chargement et combien il est facile.
-4

Tout ce que je pouvais penser à faire est de rapetisser, pas nécessairement à la main, mais manuellement afin que le site n'a pas à traiter.

L'envers: Votre site n'a pas à faire de ce processus maintenant, il n'a qu'à charger un grand, déjà minimisé fichier.

Le revers de la médaille: Chaque fois que vous voulez apporter des modifications au code, soit vous devez le faire dans le géant, minifiés fichier, ou apporter des modifications à votre fichier précédent, et puis re-minify tout nouveau.

Si les pros outway les inconvénients de cette méthode pour vous, utilisez quelque chose comme (mais pas nécessairement) http://cssminifier.com/

Il y a un million de minifiers là-bas pour choisir. Une simple recherche google devrait donner ces résultats.

Vous devez vous connecter pour publier un commentaire.

Bibliothèque: CodeIgniter Uglify

Installation

Exemples D'Utilisation: