Как склеивать, чистить, сжимать файлы css и javascript

Здесь я еще не знал, как вообще работать с этими файлами. Но уже занл про GULP плагины. Потому решил найти онлайн инструменты для быстрой склейки (например) CSS... Нашел много чего: PageSpeed Insights, What is the Closure Compiler..., jsmin, Разработка → Разгони свой сайт – автоматическая СКЛЕЙКА + GZIP...

style="float:left; margin-right:10px;" jQuery Builder

Практический CSS/JS: архивируем все!
Сократите объем ресурсов (HTML, CSS и JavaScript)
PageSpeed InsightsСкорость загрузки. Изучите инструменты Google для работы с сайтами, в том числе расширения для браузера и API Insights, сервис PageSpeed и библиотеки оптимизации.
YUI Compressor
What is the Closure Compiler? The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.
Closure Compiler
The Hello World of the Closure Compiler Service UI The easiest way to get familiar with the Closure Compiler service is by optimizing a few simple functions in the service's web UI.
jsmin
cssmin-js
how to best enable gzip compression on shared hosting
.htaccess and gzip compression
HTTP Concatenation module for Nginx забыл еще упомянуть про рамдиск который почти везде применяется. Кстати насчет Github Pages, там сервера nginx, статика при публикации сжимается gzip'ом можно использовать как полноценную CDN(ведь раздается все по сути с rackspace). такие проекты как cachedcommons.org/ используют Github Pages для раздачи =)

Разработка → Разгони свой сайт – автоматическая СКЛЕЙКА + GZIP
Support precompressed .gz files on GitHub Pages

Разработка → Разгони свой сайт – автоматическая СКЛЕЙКА + GZIP¶

Большинство современных браузеров поддерживают метод сжатия deflate, иногда называемый gzip по имени стандартной *nix утилиты, осуществляющей это дело.

Что можно и нужно сжимать в веб? Любые текстовые запросы, как то: JS / CSS / JSON / HTML.

Есть замечательный модуль для Апача mod-deflate, которым можно прямо из .htaccess указать чего сжимать и чего не сжимать, очень прост в использовании, но увы и ах! – обычно запрещенный на стандартных хостингах по причине того, что они (хостеры) опасаются за свое процессорное время. Доля разумного в этом конечно есть – этот модуль жмет все «на лету» и если не принять некоторых хитростей, каждый раз грузя страничку для нового пользователя он будет заново пережимать все CSS / JS и т.д.

Большинство JS / CSS и других текстов – это статика, т.е. они не меняются в процессе функционирования сайта — есть смысл их объеденить, чтобы удовлетворить пункту о «склейке» + сразу же сжать.

Полученные файлы мы положим в некий кэш, откуда наш Апач будет их брать и отдавать. Причем процесс мы автоматизируем через mod-rewrite.

Алгоритм получится примерно такой:

In [ ]:

#запрашивается некий файл со специального URL
#если клиент поддерживает сжатие и сжатый файл такого типа есть в нашем кэше – отдаем и завершаем обработку
#если же сжатие не поддерживается и есть просто файл такого типа – отдаем его и заканчиваем обработку
#иначе запускаем наш обработчик

Надеюсь, что в корне Вашего сайта уже живет файл .htaccess с содержанием типа такого:

In [ ]:

RewriteEngine On
RewriteBase /
RewriteRule ^.*$ index.php [QSA,L]

Добавляем поддержку сжатых файлов .gz, а также .jz.gz и .css.gz¶

Для добавления нашего алгоритма пропишем в .htaccess следующее:

In [ ]:

AddEncoding gzip .gz

<FilesMatch "\.js.gz$">
        #для проксей
        Header set Cache-control: private
        Header append Vary User-Agent

        ForceType "text/javascript"
        Header set Content-Encoding: gzip
        AddCharset windows-1251 .js.gz
</FilesMatch>
<FilesMatch "\.css.gz$">
        #для проксей
        Header set Cache-control: private
        Header append Vary User-Agent

        ForceType "text/css"
        Header set Content-Encoding: gzip
</FilesMatch>

Отвечу одним БОООЛЬШИМ комментом¶

Про nginx — господа, если на фронтэнде у Вас торчит nginx — это круто, действительно круто, но во-первых вся эта методика подходит и для него, во вторых обычно бэкэнд у него — Апач.
По этому не очень уместно спорить здесь в ключе «Камаз конечно хорошо, но вот бэха! Бэха гораааздо круче» :)
Обычно nginx есть у VDS а не у простых хостингов, а VDS — совсем другая песня — я про это упоминалу уже )

Про YUI & Google Closure — естественно JS как и CSS надо оптимизировать через них (я например использую YUI)
Но здесь я рассказывал немного не об этом, не так ли? Можно было конечно и упомянуть минимизацию, но я считаю чтобы не было сумятицы — котлеты отдельно, мухи отельно.
Минимайзеры — это вообще тема для отедльной статьи.

Так, и вот самое интересное — для меня очень интересное, как господа у которых сборка проекта осуществляется через запуск спец скриптов (например через шелл). Как применить тотже YUI или другие утилиты — это вполне понятно, непонятно одно — как Вы определяете КАКИЕ файлы для КАКОЙ странички склеивать?
Т.е. во-первых как у Вас подключаются склеиваемые скрипты на страничках, во вторых, как вы узнаете для каокй страницы какие скрипты склеивать?
У меня сделать это както хорошо, чтобы не мозолило глаза — увы — не получилось. Поделитесь опытом? Буду очень признателен.

Modules 2.1.1.¶

In [ ]:

ajax
css
deprecated ($.uaMatch, $.browser, $.sub)
dimensions
effects
event-alias
offset
wrap

In [ ]:

#Filesize: 276.14 Kb / Gzip: 82.29 Kb      Not minified, all include
#Filesize: 187.84 Kb / Gzip: 55.69 Kb      Not minified, none include 

In [ ]:

#Filesize: 93.58 Kb / Gzip: 32.51 Kb       minified all incude
#Filesize: 64.72 Kb / Gzip: 22.19 Kb       minified none incude

Очевидно, что надо все минифицировать и сжимать

Эти модули можно отключить и скачать сборку с сайта, или установить

In [ ]:

npm install -g jquery-builder

Чтобы уменьшить объем CSS, используйте инструменты YUI Compressor и cssmin.js.

YUI Compressor¶

According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage).
This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy.
With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc.

In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. Each of these tools, however, has drawbacks.
JSMIN, for example, does not yield optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any new bugs).

Посты чуть ниже также могут вас заинтересовать