Сжимаем и обединяем JavaScript одной командой

Выкладываем свои наработки
Ответить
Аватара пользователя
xoma
Сообщения: 641
Зарегистрирован: 2009.04.02, 15:24
Откуда: Ногинск
Контактная информация:

Сжимаем и обединяем JavaScript одной командой

Сообщение xoma »

Всем привет!

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

Сегодня немного подправил код и вот выкладываю =)

Все файлы жмутся вот этим средством http://github.com/rgrove/jsmin-php/blob ... /jsmin.php


Пример запуска: php /var/www/yupe/commandRunner.php YJsMinify /var/www/yupe/web js min

Для получения справки - запустите команду без параметров php /var/www/yupe/commandRunner.php YJsMinify

Пример вывода:
I will minify js-files (*.js) in '/var/www/yupe/web' directory !

I will add 'min' suffix to minifyed files!

Found 10 files
ask.js ===> 2935 bytes
site.account.inbox.js ===> 2026 bytes
site.follow.stream.js ===> 1139 bytes
site.index.js ===> 1475 bytes
site.login.js ===> 1132 bytes
site.popup.question.js ===> 3491 bytes
site.profile.js ===> 1307 bytes
site.registration.js ===> 3134 bytes
site.search.js ===> 809 bytes
site.settings.js ===> 364 bytes
===== Without compress/minify: 17812 bytes ======




===== GoGoGoGo! Compress them all !!! =====

ask.min.js ===> 2174 bytes (7.61%)
site.account.inbox.min.js ===> 1457 bytes (5.69%)
site.follow.stream.min.js ===> 973 bytes (1.66%)
site.index.min.js ===> 1183 bytes (2.92%)
site.login.min.js ===> 852 bytes (2.8%)
site.popup.question.min.js ===> 3008 bytes (4.83%)
site.profile.min.js ===> 977 bytes (3.3%)
site.registration.min.js ===> 2463 bytes (6.71%)
site.search.min.js ===> 679 bytes (1.3%)
site.settings.min.js ===> 243 bytes (1.21%)


===== After compress/minify: 14009 bytes ======

===== Size of your scripts is reduced by 38% (3803 bytes) ======

Возможно есть баги =)

p.s. не тестировал под Win, но думаю, что должно работать!

Исходный код
Краткое описание
Скачать
minibikini
Сообщения: 51
Зарегистрирован: 2010.04.21, 21:27

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение minibikini »

былобы прикольно если бы еще и склеивал файлы в один
Аватара пользователя
xoma
Сообщения: 641
Зарегистрирован: 2009.04.02, 15:24
Откуда: Ногинск
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение xoma »

Дык склеивает =)

Если передать четвертый параметр - он рассматривается как имя результирующего общего файла.

<четвертый параметр>.<второй параметр>.<первый параметр> = имя конечного файла.

Отрывок из helpa:
USAGE
php /path/to/commandRunner.php YJsMinify <path-to-dir-with-js-files> <file-extension-for-minify> <minified-file-suffix> <combine-in-one-file>

DESCRIPTION
minify and/or combine JavaScript files in specified directory using JSMin.php (http://github.com/rgrove/jsmin-php/blob ... /jsmin.php)

PARAMETRS
* <path-to-dir-with-js-files> - directory with js-files;
* <file-extension-for-minify> - file extension for minify, default - 'js';
* <minified-file-suffix> - suffix for minifyed files, default - 'min';
* <combine-in-one-file> - if this param sended - all files will be combined into one (<combine-in-one-file>.<minified-file-suffix>.<file-extension-for-minify>);
п.с. с английским проблемка =(
Аватара пользователя
Stepan Selyuk
Сообщения: 198
Зарегистрирован: 2010.02.03, 05:51
Откуда: Cyprus, Limassol
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение Stepan Selyuk »

Эм..так уже есть http://www.yiiframework.com/extension/c ... iptminify/

Хорошая тема, сжимает все в один файл. Работает и с CSS и с JS
Но можно чуть-чуть контроллер и компонент переписать, чтобы сжимал в разные файлы.. например саму программу в одни js-файлы, а неизменяемые компоненты типа Cufon Fonts, jQuery, jQuery UI в другие.
Сначала невидимое, затем видимое. И так у всех программистов :)
Аватара пользователя
xoma
Сообщения: 641
Зарегистрирован: 2009.04.02, 15:24
Откуда: Ногинск
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение xoma »

Ну так там не консольная команда = )
Сжатие CSS тоже прикручу как время будет.
Аватара пользователя
slavcodev
Сообщения: 3134
Зарегистрирован: 2009.04.02, 21:42
Откуда: Valencia
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение slavcodev »

А в чем преимущество команды?
Тем более что у меня скрипты не лежат в одной папке, а в ресурсы публикуются.
И кстати команда только с файлами работает, она же не меняет шаблон чтоб изменить путь к скриптам?
Жду Yii 3!
Аватара пользователя
xoma
Сообщения: 641
Зарегистрирован: 2009.04.02, 15:24
Откуда: Ногинск
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение xoma »

Просто команду можно использовать для сжатия js-файлов не только в Yii-проектах.
Я, например, на девелоперском сервере, сжимаю этой командой js-файлы своего Perl-ового проекта (удобно - один раз написал и используешь везде).
Для подключения минимизированных файлов, необходимо переопределить clientScript, как и сделано вот тут http://www.yiiframework.com/extension/c ... iptminify/
Аватара пользователя
Stepan Selyuk
Сообщения: 198
Зарегистрирован: 2010.02.03, 05:51
Откуда: Cyprus, Limassol
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение Stepan Selyuk »

В http://www.yiiframework.com/extension/c ... iptminify/ есть следующие фишки:

1. Создание минимизированных и сжатых (gz) файлов в rutime-каталоге. Обновление, если файлы из сета были обновлены.
2. Соответственно уже подключение этих файлов в код.
3. Обработка ситуаций когда файл есть в кеше браузера и т.д.

У меня например, публикуются обычные css, js. А архивы формируются при первом запросе сета. Я написал специальный публикатор проекта, который отсеивает ненужные файлы, пакует zend encoder'om и т.д.
Можно хоть 20 раз в день публиковать (среднее время публикации 5 минут), не нужно запоминать где внес изменения, не нужно пережимать js, css. Все автоматически.

Если интересно, могу в новой теме выложить публикатор. Получилось довольно универсально:

1. Публикует проект в каталоге (если надо, прогоняет через Zend Encoder). Генерирует карту файлов.
2. Сравнивает карту файлов на сервере и текущую. Подготавливает обновления.
3. Сжимает обновления в ZIP и загружает по FTP. Выключает сайт (переименовывает файл .CLOSE_SITE => CLOSE_SITE, обработку ессно нужно сделать этого в проекте)
4. Запускает Putty и распаповывает архив поверх старых файлов.
5. Включает сайт (переименовывает файл CLOSE_SITE => .CLOSE_SITE)

Что не делает, так это не удаляет ненужные файлы с сервера...но это тоже можно дописать :)
Сначала невидимое, затем видимое. И так у всех программистов :)
Аватара пользователя
xoma
Сообщения: 641
Зарегистрирован: 2009.04.02, 15:24
Откуда: Ногинск
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение xoma »

конечно интересно, выкладывай!

Будет "деплоер" Yii-проектов ;)
Аватара пользователя
Stepan Selyuk
Сообщения: 198
Зарегистрирован: 2010.02.03, 05:51
Откуда: Cyprus, Limassol
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение Stepan Selyuk »

Помоему любых проектов :) так как это выглядит как отдельный проект, и почти все настраивается в конфиге ))
Ок, завтра выложу.
Сначала невидимое, затем видимое. И так у всех программистов :)
ram0973
Сообщения: 54
Зарегистрирован: 2010.06.12, 22:18
Откуда: Набережные Челны
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение ram0973 »

У меня проблема с CClientScriptMinify. Файл css как-то странно подключается. В html-шапке создается линк с таким адресом
/minify/34f8b19b44c905806fb03108e6070e53.css , но эта папка /minify/ пустая. Этот файл должен копироваться в папку /minify ?
Хотя в папке runtime файл с минимизированным css создается, и файл с названиями всех css и js тоже.
Что интересно, в конфиге вот здесь 'minifyController'=>'/minify', если писать 'minifyController'=>'/site/minify', эта строка попадает в линк:
href="/site/minify/***.css"

Подключал в точности как в readme. Yii 1.1.5. Тестирую в XAMPP'е.
ram0973
Сообщения: 54
Зарегистрирован: 2010.06.12, 22:18
Откуда: Набережные Челны
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение ram0973 »

Взял EClientScript-1.3 и всё заработало с пол-пинка. Теперь как бы допилить его, чтобы :
1) Сначала шли мои стили, потом стандартные. А то ресет стилей посередине файла.
2) ВСЕ стили были в конце <body>.
wolandino
Сообщения: 103
Зарегистрирован: 2011.02.02, 20:03

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение wolandino »

У меня проблема с CClientScriptMinify.
У вас скорее всего на фронтенде nginx, который не понимает что вы от него хотите.
Если бы вы попробовали site.ru:8080/minify/34f8b19b44c905806fb03108e6070e53.css (где 8080 порт, прослушиваемый апачем) - все бы работало прекрасно.
Аватара пользователя
vitovt
Сообщения: 210
Зарегистрирован: 2012.03.21, 10:37
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение vitovt »

Может быть кто-то сталкивался, подключаю как описано в документации (тут http://www.yiiframework.com/extension/c ... iptminify/), а в шаблон выводится

<script type="text/javascript" src="0"></script>

А если открою например /minify/4c40dd4031f41a5c237b7534745ee3a2.js

Выдает HTTP/1.0 400 Bad Request

В какую сторону копать пока не понял.
Аватара пользователя
vitovt
Сообщения: 210
Зарегистрирован: 2012.03.21, 10:37
Контактная информация:

Re: Сжимаем и обединяем JavaScript одной командой

Сообщение vitovt »

Сам спросил, сам ответил:

Проблема была в этом куске кода:

Код: Выделить всё

public function renderHead(&$output)
    {
        $cssFiles = array();
        if(!empty($this->cssFiles)){
            foreach($this->cssFiles as $url=>$media){
                $cssFiles[$media][] = $url;
            }
            $this->cssFiles = array();
            foreach($cssFiles as $media=>$urls){
                $this->cssFiles[$this->minifyController."/".$this->md5Group($urls, "css")] = $media;
            }
        }

        if($this->enableJavaScript){
            if(isset($this->scriptFiles[self::POS_HEAD])){
                $this->scriptFiles[self::POS_HEAD] = array(
                    $this->minifyController."/".$this->md5Group($this->scriptFiles[self::POS_HEAD], "js")
                );
            }
        }

        parent::renderHead($output);
    }
Вот тут должно быть что-то вроде ассоциативного массива:

Код: Выделить всё

$this->minifyController."/".$this->md5Group($this->scriptFiles[self::POS_HEAD], "js")
Вот так

Код: Выделить всё

$this->minifyController."/".$this->md5Group($this->scriptFiles[self::POS_HEAD], "js")=>'js'

Но вообще решение работает криво. Например, я не могу пользоваться как раньше конструкцией

Код: Выделить всё

'packages'=>array(
                    'jquery'=>array(
                        'baseUrl'=>'/statics/js/',
                        'js'=>array('jquery-1.8.3.min.js'),
                        'coreScriptPosition'=>CClientScript::POS_READY
                    ),
                    'jquery.ui'=>array(
                        'baseUrl'=>'/statics/js/',
                        'js'=>array('jquery-ui.min-DP.js'),
                        'depends'=>array('jquery'),
                        'coreScriptPosition'=>CClientScript::POS_READY
                    ),                  
                ),
т.е 'baseUrl'=>'/statics/js/' надо указывать как-то иначе
А если зайти на /minify/.....js

через раз выдает ошибку split()
Ответить