Минимизировать CSS и JS в CodeIgniter Эффективно

Итак, я работаю над проектом с использованием PHP Framework CodeIgniter (http://ellislab.com/codeigniter), и внутри него мы используем множество различных файлов CSS/JS которые вызываются в нашем заголовке.

Я использовал инструмент Minify раньше на сайтах WordPress и других проектах и ​​наткнулся на эту библиотеку для CodeIgniter на GitHub (https://github.com/ericbarnes/ci-minify), и решил, что я используйте его в моем проекте.

Он работает отлично и денди, но, к сожалению, я сжимаю так много CSS и JS файлов, которые к моменту загрузки страницы было бы быстрее, если бы я не использовал его.

Вот какой код выглядит в моем контроллере:

    // 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');

Итак, я беру эти большие массивы файлов CSS и JS, сжимая их, а затем сохраняя их в один большой файл. Но есть ли лучший и эффективный способ сделать это?

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

Итак, какие-то мысли о том, как я могу эффективно это сделать?

Спасибо!

Ответ 1

Почему бы не использовать Grunt? Вы можете настроить несколько задач для конкатенации и минимизации файлов JavaScript. Я сделал это сам для проекта CodeIgniter, и он работал хорошо. Вот учебник.

Grunt - это инструмент Node.js, но поскольку вы будете делать сборку на своей машине разработки, это не должно быть проблемой - вам не нужно иметь Node на сервере. Идея заключается в том, что перед выполнением изменений вы запускаете задачу сборки, которая объединяет и минимизирует ваши JavaScript и CSS. Затем ваша фиксация включает в себя мини файлы, и вы нажимаете их на сервер.

Вот файл Gruntfile, который я использовал для моего проекта CodeIgniter:

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']);
};

И файл package.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"
}

Ответ 2

Мое личное решение, так как я использую git и перехватывать события, должно было бы заставить php-контроллер отображать этот css и js файл при нажатии и вытягивании. Это означает, что когда вы применяете новые данные, hook выполняет этот PHP скрипт и повторно записывает файл один раз.

В hook bash script запустите что-то вроде php /var/www/index.php tool/minify, чтобы запустить контроллер script.

Похоже, это более идеальное решение, поскольку сервер делает это только тогда, когда это действительно необходимо. Если вам нужно немного поработать над тестированием, просто запустите рендеринг мини файлов один раз через контроллер при обновлении файла css или js вручную.

Ответ 3

Только что закончила эту библиотеку для моего нового сайта. Я положил его на Github, это может помочь.

Библиотека библиотек HTML/CSS/Javascript

введите описание изображения здесь

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

Ответ 4

Чувак.... хрюкать. это спасет вашу жизнь. Следите за своими файлами sass/can/js за изменениями и автоматически уменьшайте и конкатцируйте в один js и один файл css. Удивительно, насколько это улучшит ваше время загрузки и насколько оно просто.

Ответ 5

У меня была такая же проблема, мне нужен JS/CSS minifier, который 1) работает вместе с моим парсером шаблонов, 2) всегда включает в себя некоторые основные мини файлы и 3) имеет возможность добавлять дополнительные мини файлы, если это необходимо.

Решение: https://github.com/robinwo/codeigniter-templates-minify (на основе https://github.com/slav123/CodeIgniter-minify).

Файл обновляется "на лету" и только один раз (если вы не принудительно обновите).

Ответ 6

Здесь вам может быть интересно, я написал эту мини-библиотеку (uglifying) на основе Маттиас Мулли работает над minifier.


Библиотека: CodeIgniter Uglify

Установка

Чтобы установить этот класс, просто загрузите содержимое папки src из github repo в application/libraries. Затем загрузите класс с помощью libarary loader CodeIgniter:

$this->load->library("ugly/ugly");

Примеры использования:

// 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();

Теперь вы можете сохранить результат в новом файле или выполнить его эхо или что угодно.

Примечания:

  • Вы также можете передать массив файлов:

    • $this->ugly->group_add( array("file1","file2","file2") );.
  • Вы также можете передавать ресурсы по методу group_start:

    • $this->ugly->group_start( array("file1","file2","file2") );.

Ответ 7

Я использовал Grunt.js для своего проекта codeigniter, чтобы:

  1. Конкат js и css файлы в один файл, как app.css и app.js
  2. Минимизировать окончательный CSS и JS файлы

После установки Node.js на компьютер для разработки (Linux, Windows или Mac) вы можете установить grunt и grunt-cli с помощью npm (см. Документ Gruntjs).

Тогда вы можете использовать эти плагины на grunt:

  1. grunt-contrib-concat для констатации файлов css и js в один файл
  2. grunt-contrib-cssmin для минимизации CSS файлов
  3. grunt-contrib-uglify для минимизации js файлов

Затем вы можете создать Задачи для объединения и уменьшения файлов CSS и JS и, наконец, синхронизировать с сервером.

Это

Ответ 8

Все, что я мог придумать, - это их минимизировать, не обязательно вручную, а вручную, чтобы веб-сайт не обрабатывал их.

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

Недостаток: всякий раз, когда вы хотите внести изменения в код, вам нужно либо сделать это в гигантском, уменьшенном файле, либо внести изменения в свой предыдущий файл, а затем снова переопределить все.

Если профи выходят за пределы этого метода для вас, используйте что-то вроде (но не обязательно) http://cssminifier.com/

Есть миллион minifiers на выбор. Простой поиск в Google должен дать эти результаты.