Сжимаем JavaScript и CSS файлы


Один из этапов клиентской оптимизации – сжатие и объединение JavaScript и CSS файлов.


Для этой цели лучше всего использовать YUI compressor, а чтобы этот процесс не занимал много времени я написал простенький bash скрипт:

#!/bin/bash
# Javascript source
SRC="./src/"
RES="./project.min.js"

# declare script array
ARRAY=( 'jquery' 'jquery-ui' 'jquery.tooltip' 'jquery.colorbox')
# get number of elements in the array
ELEMENTS=${#ARRAY[@]}

rm $RES

# echo each element in array
# for loop
for (( i=0;i<$ELEMENTS;i++)); do
    echo "Compress file '${ARRAY[${i}]}'"
    echo "/*${ARRAY[${i}]}*/" >> $RES
    java -jar yuicompressor-2.4.2.jar --charset utf-8 $SRC${ARRAY[${i}]}.js >> $RES
done

Запускаем скрипт и ждем окончания выполнения – вуаля – у нас один сжатый скрипт, использование которого облегчает жизнь серверу…

Для CSS написан аналогичный скрипт, лишь разница в путях, можно и объединить скрипты в один, но меняя JS пережимать еще и CSS не хочется…

Другие посты на эту тему

21 Responses to “Сжимаем JavaScript и CSS файлы”

  1. А для разработчиков, которые используют Eclipse, лучше и вовсе использовать build tool для этих целей ;)

  2. random says:

    Вариант хороший, одно время тож все на bash собирал, счас перешел на ant проще, практичнее и абстрактнее

  3. unmamed says:

    вроде бы google closure complier чуть лучше сжимает, jquery его теперь использует

  4. dgl says:

    Ant слишком сложная и громоздкая штука, для деплоймента намного удобнее использовать Capistrano или Fabric. По поводу поста: еще замечательный инструмент juicer, который избавляет от необходимости писать лишний раз bash-скрипты:)

  5. uge_ne_tort says:

    это все прекрасно, но. если внезапно добавится еще файлы придется изменять этот скрипт.
    + не все могут это исполнять на сервере. предлагаю http://code.google.com/p/minify/

  6. Чистяков Денис says:

    Тоже хотел спросить почему не гугло-компилятор, он конечно не умеет сжимать CSS, и для этого нужно иметь и еще и YUI compressor, но JS он сжимает лучше.

  7. Чистяков Денис says:

    Тоже хотел спросить, почему не гугло-компилятор, он конечно не умеет сжимать CSS, и для этого рядом с ним должен лежать YUI compressor, но JS он сжимает лучше, переход jQuery на него — лишнее тому подтверждение.

  8. Dear Anton,
    Congratulations for the good work.
    I translated Construction into Polytonic (classical) Greek. Language code = el-po.
    The .mo file is in
    http://www.keymangreek.gr/wp-translation/constructor/el-po.mo
    The .po file is in the same directory:
    http://www.keymangreek.gr/wp-translation/constructor/el-po.po
    If you think appropriate, you can include them in the constructor distribution package.

    While testing the translation, I noticed that some wordings are still untranslated, i.e, they appear in English. Whenever you produce a .po file that includes them, please, let me know, so that I can update accorgingly.

    Thanks in advance,
    Amaryllis

  9. random says:

    с каких то пор ANT сложная штука? она сложная только пока вам не нужно собирать по 50 раз новые билды

  10. Удалять сжатый файл до создания нового не лучшая идея.
    Лучше писать новый файл во временный, а потом временный подменять на основной.
    И перед подменой делать проверку md5sum и проверку, что новый файл действительно создался без проблем (например прав на запись).
    Тогда, организовывая deployment можно этот срипт вызывать через cron или по опрделенному событию в build файле.

  11. dgl says:

    @random Наверное не совсем точно выразился. Я имел в виду, что возможности Ant превосходят потребности разработчиков, которые пишут веб-приложения на интерпретируемых языках (собственно, основная аудитория этого блога). В этом случае билд = деплоймент, который в свою очередь состоит из рутинных команд:
    1) зайти по ssh на удаленный сервер
    2) обновить код из стабильной ветки репозитория
    3) объединить и сжать css и js
    4) выполнить миграции БД
    5) перезапустить сервер (если нужно)
    Для решения именно вышеперечисленных задач есть специальные удобные инструменты, почему бы ими не пользоваться?

    Кстати, можно и дальше автоматизировать этот процесс, например создать post-recieve хук для git:)

  12. SunnyDay says:

    М, я тоже такую штуку делал, на C++, только чтобы сначала обфусцировать скрипты, а потом паковать в xpi файл – ‘компилить’ плагин для фаерфокса.

  13. phpdude says:

    http://clear.helldude.ru/2009/11/25/dudefrontend-%D0%B1%D0%B5%D1%82%D0%BA%D0%B0-0-1/

    вот такое я сделал для себя и своих целей, тоже полезно, может кому пригодится :)

  14. Q-Zma says:

    Я обычно для деплоймента использую phing. Такой себе ant на php :).

  15. Alexey says:

    вместо ./src/${ARRAY[${i}]} должно быть $SRC${ARRAY[${i}]}

  16. Илья says:

    Для ускорения лучше сначала собрать все в один файл а потом его уже сжимать.
    Причем можно нечто типа

    cat file1 file2 .. filen | $minify >>$RES

  17. Для PHP есть Phing, незачем изобретать велосипеды.

Leave a Reply

Copyright © 2007-2010, Anton Shevchuk. Powered by WordPress