Сжимаем и совмещаем CSS/JS на лету

[node.js 103]

Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.

 

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

К примеру, я лично да и мои знакомые, стараются распределить программный код по файлам, скажем для хедера свой стилевой файл css (header.css), для менюшки свой, для футера, да даже для пагинации, все распределено по файлам и в случае чего не нужно будет долго искать участок кода отвечающий за настройку определенного блока, открыл нужный файл и все настройки в нем. Другими словами это очень удобно.

 

Однако после таких удобств для программиста страдает конечный пользователь, кому же хочется загружать по 20-30 css файлов сайта и столько же еще JS файлов, да и загрузка такого пучка файлов существенно повышает загрузку самой страницы сайта, ведь браузер делает каждый раз запрос на сервер где расположен данный файл.

 

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

 

Скажем если мне понадобиться поправить отступ менюшки, мне придется открыть файл менюшки, поправить в нем отступ, затем открыть сжатый файл и искать по регулярке участок кода менюшки или же опять таки вручную компилировать (собирать) все это добро и опять сжимать, все это негативно влияет на меня и в итоге я просто забиваю на эту правку и говорю себе, пользователь стерпит, поплюется да привыкнет. А это в корне противоречит хорошим и качественным проектам которые пытаются подстроится под бОльшую аудиторию.

 

Все это постоянно подталкивало на поиски решения данной проблемы.

 

Ладно не буду писать тонны текста, главное надаюсь вы уловили саму суть проблемы описанной выше.

 

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

 

Сразу скажу, если вы увидите что то неизвестное вам, не пугайтесь, вы оказались в 21 веке и миллионы людей разрабатывают очень полезные и удобные инструменты по работе и управлению сайтами. Тем более что я буду писать для новичков и очень сжато, только нужно для настройки.

 

Речь пойдет о Gulp https://github.com/gulpjs/gulp

Gulp поможет вам сжать любой код, проверить наличие ошибок в коде, объединить код, и еще миллион других возможностей вплоть до оптимизации стилей под IE.

 

Что такое NPM, вы можете погуглить, в прочим так же как и обо всем написанном в данном топике, все это не нова, и я не открываю вам окно в европу, хотя для некоторых это именно ибудет окном.

 

Для полноценной работы с Gulp вам нужно будет установить Node.JS на сервере, и не нужно пугаться, все что вам нужно будет сделать это ввести всего одну (ну ладно две) команды, для ubuntu они выглядят так

sudo apt-get update
sudo apt-get install nodejs

Установка node.js быстрая и не помешает вашим сайтам
работать в штатном режиме.

После установки node.js вы можете проверить его работу в и ssh ввести простую команду

console.log('ok')

Если увидите ответ «ок», нода установилась.

Вместе с node.js установится и npm менеджер, с помощью которого вы установите gulp

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

Устанавливаем сам gulp

sudo npm i gulp -g

Давайте предположим что наш проект находится в папке на сервере

/var/www/data/site.ru/

А файлы CSS и JS, или даже сторонние плагины для сайта, находятся:

/var/www/data/site.ru/static/css/
/var/www/data/site.ru/static/js/
/var/www/data/site.ru/plugins/

Что нам понадобиться, это всего лишь один файл с настройками gulpfile.js и ничего более!

 

Но тем не менее сам gulp не может сжимать и объединять файлы, он помогает создать и управлять тасками (task) по сборке проекта.

 

Вам нужно будет добавить некоторый список npm модулей, так же как мы добавили gulp

sudo npm i gulp-jshint gulp-concat gulp-rename gulp-uglify gulp-minify-css -g

Описание данных модулей вы сможете найти на гитхаже или в гугле вбейте «npm gulp-minify-css»

Вкратце это тот набор модулей который будет сжимать, объединять, переименовывать файлы проекта.

 

Для скомпилированных исходников дайте так же создадим дополнительную папку

/var/www/data/site.ru/compiled/

Файлы именно из этой папки мы и будет подключать на самом сайте.

 

Теперь создадим сам файл gulpfile.js в директории с сайтом

/var/www/data/site.ru/gulpfile.js

И напишем сам компилятор, откроем gulpfile.js и пропишем в него код:

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');

var path = {
    'scriptScreen': [
        './static/plugins/menu/script.js',
        './static/js/cookie.js',
        './static/js/auth.js',
        './static/js/comments.js',
        './static/js/slider.js',
    ],
    'cssScreen': [
        './static/css/screen.css',
        './static/css/header.css',
        './static/plugins/menu/css/style.css'
    ],
    'dist': './static/compiled'
};

// Конкатенация и минификация файлов JS
    gulp.task('script-screen', function(){
        gulp.src(path.scriptScreen)
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(concat('screen.js'))
            .pipe(rename('screen.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest(path.dist));
    });

// Конкатенация и минификация файлов CSS
    gulp.task('css-screen', function(){
        gulp.src(path.cssScreen)
            .pipe(concat('screen.css'))
            .pipe(rename('screen.min.css'))
            .pipe(minifyCss({compatibility: 'ie8'}))
            .pipe(gulp.dest(path.dist));
    });

// Действия по умолчанию
gulp.task('default', function(){
    gulp.run('script-screen','css-screen');

    // Отслеживаем изменения в файлах
    gulp.watch([path.scriptScreen, path.cssScreen], function(event){
        gulp.run('script-screen', 'css-screen');
    });
});

Теперь при выполнении команды

gulp все ваши файлы объединяться и сожмутся.

 

По ssh вам нужно перейти в корневую папку каталога

cd /var/www/data/site.ru/

и соответственно выполнить

gulp

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

 

В папке compiled появятся минифицированные файлы

/compiled/screen.min.js
/compiled/screen.min.css

Их и нужно подключить на страницах сайта.

 

Теперь при изменении файлов в папке static, вам нужно будет просто вновь запустить команду gulp и она автоматически перекомпелируются.

Если вам нужно поменять порядок файлов, измените их последовательность в gulpfile и выполните команду.

Если вам нужно добавить файлов, добавите их список в gulpfile и выполните команду.

 

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

 

ПС. хотел покороче, но вышло как всегда =(

[Metaarv 215]

Интересно, но чем это лучше GZIP сжатия, с которым особой мороки вроде как не очень много?

[node.js 103]

Интересно, но чем это лучше GZIP сжатия, с которым особой мороки вроде как не очень много?

Gzip в любом случае нужно подключать, но речь идет не о кешировании, речь идет о объединение всех файлов и последующей их минификации, а Gzip это совсем не то, видимо вы не поняли о чем речь идет

 

Т.е. у вас есть к примеру два файла CSS

 

style1.css

.header {
    margin: 10px 0;
}

И style2.css

.footer {
    margin-top: 40px;
}

Запустив gulp вы получите один файл в папке compiled

screen.min.css

.header{margin:10px 0}.footer{margin-top:40px}

В случае с JS тоже самое, да даже тот же HTML или PHP можно сжимать, делая полноценные компилирующие сами себя проекты в параллельной папке. Есть так же npm по работе c CoffeeScript, и еще много чего полезного. К тому же есть валидация JS, которая будет указывать на ваши ошибки

[Metaarv 215]

Gzip в любом случае нужно подключать, но речь идет не о кешировании, речь идет о объединение всех файлов и последующей их минификации, а Gzip это совсем не то, видимо вы не поняли о чем речь идет

Действительно не понял, но я как правило заранее оптимизирую стили и скрипты, и не держу их пачками, затем в принципе можно сжать файлы 7-Zip облегчив еще раза в три-четыре и убавив нагрузку на сервер, или сжимать налету. В чем тогда будет заключаться плюшка от дополнения в виде Gulp, если файлы уже оптимизированы и пожаты?

[witosp 636]

Плюсую  - но скажу честно я мало чего понимаю в CSS и JS - меня больше интересует больше длинная 1 CSS нежели 3 CSS  ((header.css) футер и т.д.)) на одном сайте.

[node.js 103]

Плюсую  - но скажу честно я мало чего понимаю в CSS и JS - меня больше интересует больше длинная 1 CSS нежели 3 CSS  ((header.css) футер и т.д.)) на одном сайте.

 

 

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

К примеру у меня проект состоит из 14 файлов js, не сжатых, красиво оформленных с подсказками, пояснениями что за что отвечает, gulp собирает всю информацию об этих файла, совмещает их в один и сжимает их. При следующей правке мне не нужно обращаться с этой портянке, она в буквальном смысле выкидыш того что написано в 14 файлах. Поэтому мне достаточно открыть файл menu.js, изменить его содержимое и gulp вновь выкинет мне свежий глобальный минифицированный и оптимизированный один файл с расширением .min.js

 

А теперь еще раз смотрим, у нас есть один JS файл, мы его сжали после написания, залили его на сайт, его код выглядит примерно так (это кусок  файла с реального проекта):

function getCookie(e){var t=document.cookie.match(new RegExp("(?:^|; )"+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,"\\$1")+"=([^;]*)"));return t?decodeURIComponent(t[1]):void 0}function setCookie(e,t,s){s=s||{};var i=s.expires;if("number"==typeof i&&i){var a=new Date;a.setTime(a.getTime()+1e3*i),i=s.expires=a}i&&i.toUTCString&&(s.expires=i.toUTCString()),t=encodeURIComponent(t);var l=e+"="+t;for(var o in s){l+="; "+o;var n=s[o];n!==!0&&(l+="="+n)}document.cookie=l}function deleteCookie(e){setCookie(e,null,{expires:-1,path:"/"})}function date_save(e){var t=new Date;return t.setTime(t.getTime()+60*e*60*5e3),t}function number(e){e.value=e.value.replace(/[^\d,]/g,"")}function page_up(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href"),"0"!=$(window).scrollTop()&&$(this).fadeIn("slow");var e=$(this);$(window).scroll(function(){"0"==$(window).scrollTop()?$(e).fadeOut("slow"):$(e).fadeIn("slow")}),$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}function loadHeaderPanel(e,t){var s=$(".load-header"),i=($(".success-header"),s.data()),a=s.height();t=t?1:0,"closed"!=i.success&&(t=1),e.addClass("active");

И тут мне через месяц понадобилось изменить функцию getCookie, изменить в таком варианте практически невозможно,  так как он оптимизирован и имена некоторых переменных изменены на короткие. Что мне делать с такой портянкой, а это всего лишь 1% кода файла, как найти эту функцию если она в середине? Беда не правда ли? ))) Выходит мне нужно вновь перераспределять файлы и вновь чем то их сжимать, заливать.

 

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

 

Это очень удобно если сайт состоит не из макс. 1000 строк программного кода. Когда речь идет о свыше 10000 кода, когда портянка весит от пол мегабайта, а в итоге ты получаешь портянку всего в 40-60кб.

[desg 55]

Скрипт действительно имеет смысл и логику, но на мое усмотрение только для больших проектов, как и описал автор темы что когда 15-20, а то и больше css файлов, разобраться в них будет очень трудно если Вы не писали этот код, бывает такое что классы в стилях повторяются по 5-6 раз, но в разных файлах. С данным плагином как на меня можно будет разобраться в разы быстрей...

 

Автору темы большое спасибо за описание и ссылку)

[files 2843]

А теперь еще раз смотрим, у нас есть один JS файл, мы его сжали после написания, залили его на сайт, его код выглядит примерно так (это кусок  файла с реального проекта):

function getCookie(e){var t=document.cookie.match(new RegExp("(?:^|; )"+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,"\\$1")+"=([^;]*)"));return t?decodeURIComponent(t[1]):void 0}function setCookie(e,t,s){s=s||{};var i=s.expires;if("number"==typeof i&&i){var a=new Date;a.setTime(a.getTime()+1e3*i),i=s.expires=a}i&&i.toUTCString&&(s.expires=i.toUTCString()),t=encodeURIComponent(t);var l=e+"="+t;for(var o in s){l+="; "+o;var n=s[o];n!==!0&&(l+="="+n)}document.cookie=l}function deleteCookie(e){setCookie(e,null,{expires:-1,path:"/"})}function date_save(e){var t=new Date;return t.setTime(t.getTime()+60*e*60*5e3),t}function number(e){e.value=e.value.replace(/[^\d,]/g,"")}function page_up(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href"),"0"!=$(window).scrollTop()&&$(this).fadeIn("slow");var e=$(this);$(window).scroll(function(){"0"==$(window).scrollTop()?$(e).fadeOut("slow"):$(e).fadeIn("slow")}),$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}function loadHeaderPanel(e,t){var s=$(".load-header"),i=($(".success-header"),s.data()),a=s.height();t=t?1:0,"closed"!=i.success&&(t=1),e.addClass("active");

И тут мне через месяц понадобилось изменить функцию getCookie, изменить в таком варианте практически невозможно,  так как он оптимизирован и имена некоторых переменных изменены на короткие. Что мне делать с такой портянкой, а это всего лишь 1% кода файла, как найти эту функцию если она в середине? Беда не правда ли? ))) Выходит мне нужно вновь перераспределять файлы и вновь чем то их сжимать, заливать.

 

Кстати, для таких целей есть такая штуковина: http://www.cleancss.com/javascript-beautify/

[illbeback 1]

Вопрос автору - а если на проекте используются несколько наборов стилей и js для разных разделов сайта?

 

Из минусов данного решения я вижу следующие:

1. Установка и настройка node.js - шаред-хостинги все это позволяют сделать?

2. Необходимость каждый раз запускать gulpfile.js для компиляции проекта.

3. Дополнительные настройки gulpfile (танцы с бубном), если на проекте используются разные наборы css и js.

 

Как альтернативу описанному способу можно использовать php-класс ("php minify js" => первый в гугле), который не требует установки дополнительных пакетов, а настройки по-умолчанию подойдут для большинства сайтов. Небольшая доработка класса "напильником" позволит добиться автоматического сброса кеша при внесении изменений в файлы css и js.

[valentino 60]

Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только.

не думаю, что новичек самостоятельно справиться со всеми этими рекомендациями:

вам нужно будет установить Node.JS на сервере...

Устанавливаем сам gulp...

добавить некоторый список npm модулей...

Для скомпилированных исходников дайте так же создадим дополнительную папку...

Теперь создадим сам файл gulpfile.js в директории с сайтом...

И напишем сам компилятор, откроем gulpfile.js и пропишем в него код...

По ssh вам нужно перейти в корневую папку каталога...

и соответственно выполнить...

После выполнения команды, gulp уведомит вас в консоле что все закончено...

В папке compiled появятся минифицированные файлы ... Их и нужно подключить на страницах сайта.

что касается вот этого абзаца:

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

К примеру, я лично да и мои знакомые, стараются распределить программный код по файлам, скажем для хедера свой стилевой файл css (header.css), для менюшки свой, для футера, да даже для пагинации, все распределено по файлам и в случае чего не нужно будет долго искать участок кода отвечающий за настройку определенного блока, открыл нужный файл и все настройки в нем. Другими словами это очень удобно.

 

Однако после таких удобств для программиста страдает конечный пользователь, кому же хочется загружать по 20-30 css файлов сайта и столько же еще JS файлов, да и загрузка такого пучка файлов существенно повышает загрузку самой страницы сайта, ведь браузер делает каждый раз запрос на сервер где расположен данный файл.

 

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

 

Скажем если мне понадобиться поправить отступ менюшки, мне придется открыть файл менюшки, поправить в нем отступ, затем открыть сжатый файл и искать по регулярке участок кода менюшки или же опять таки вручную компилировать (собирать) все это добро и опять сжимать, все это негативно влияет на меня и в итоге я просто забиваю на эту правку и говорю себе, пользователь стерпит, поплюется да привыкнет. А это в корне противоречит хорошим и качественным проектам которые пытаются подстроится под бОльшую аудиторию.

 

Все это постоянно подталкивало на поиски решения данной проблемы.

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

 

для примера кусок css-ки:

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* --------------------------------------------------------------

	Sets up some sensible default typography.

-------------------------------------------------------------- */

/* Default font settings. */
html { font-size:100.01%; }
body {
  font-size: 75%;
  line-height:1.5em;
  color: #513216;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #222; }

h1 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h2 {  font-size: 1.5em; line-height: 1; margin-top: 1em; padding:0 10px  }
h2 a:hover { color:#222; text-decoration:underline; }
h2 a , h2 a:visited, h2 a:focus{ color:#222; text-decoration:none }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; font-weight:bold; color:#ff8000 }
h3 a:hover { color:#ff8000; text-decoration:underline; }
h3 a, h3 a:visited, h3 a:focus { color:#ff8000; text-decoration:none }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; font-weight:bold }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p  { margin: 0 0 1.5em; }

a { color: #00f; text-decoration: underline; }
a:visited {color: #c9f}
a:focus, a:hover  { color: #f99; }

blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong,b,dfn	{ font-weight: bold; }
em,i,dfn { font-style: italic; }
sup	{ font-size:smaller; vertical-align:super; line-height:0 }
sub	{ font-size:smaller; vertical-align:sub; line-height:0 }
small {font-size:0.8em; font-weight:normal}

abbr { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { color:#999; }

pre { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 14px monospace; line-height: 1.5; }
pre {background:#eee; border-left:solid 3px #6f6;padding-left:10px;}

q {font-style:italic; quotes: "\00ab" "\00bb";}
q:before {content:"\00AB"}
q:after {content:"\00BB"}	

time {font-size:0.8em; line-height:1.875; font-weight:bold}

/* Lists
-------------------------------------------------------------- */

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

/* 
	Because of the need for padding on TH and TD, the vertical rhythm 
	on table cells has to be 27px, instead of the standard 18px or 36px 
	of other elements. 
 */ 
table       { 
	margin-bottom: 1.4em; 
	width:100%;
 }
th          { 
	font-weight: bold; 
}
thead th    {line-height:3em }
th,td,caption { padding: 0 0.6em; }
/*
	You can zebra-stripe your tables in outdated browsers by adding 
	the class "even" to every other table row. 
 */
tbody tr:nth-child(even) td, 
tbody tr.even td  { 
	background: #ddd; 
}
tfoot { font-style: italic; }
caption { background: #ddd; }


/* --------------------------------------------------------------

	Layout

-------------------------------------------------------------- */

html, body {height: 100%}
body {
	display:table; 
	width:1026px; 
	height:100%;
	margin:0 auto;
}
#wrapper {
	display:table-cell;
	vertical-align: middle;
}

/* header 
*************************************************************/
header {
	border-bottom:solid 1px #ff8000;
	position:relative;
}
header.inner {padding-top:80px;}
header h1 {
	width:682px;
	margin:0 auto;
	padding:0 10px;
	border-left:solid 1px #ff8000;
	font-size:2em;
	line-height:1.5;
	font-weight:bold;
}
header h2 {
	font-size: 1em;
	line-height: 1em;
	font-family: Georgia, sherif;
	font-style: italic;
	color: #999;
	position:absolute;
	left:525px;
	bottom:-10px;
	padding:0 10px;
	background:#fff;
	font-weight:bold;
	margin:0 0 8px 0;
}

header  img {
	position:absolute;
	left:21px;
	bottom:6px;
}

/* three columns
************************************************************/
aside {
	width:162px;
	float:left;
	padding-bottom:136px;
}
section {
	width:702px;
	float:left;
}


/* sidebars
***********************************************************/
aside ul {
	margin:0;
	padding:0 0 0 1.5em;
}
ul.menu {
	list-style:none;
	padding:0;
}
aside .links ul.menu a {
	color:#999;
	text-decoration:none;
	display:block;
	font-size:1.0em;
	line-height:1.5;
}
ul.menu li:hover a {color:#222}
aside .links {padding:0 0 0 10px;}
aside .links h3 {margin: 1em 0 0.5em 0}
aside .links a {font-size:0.8em; line-height:0.8}

/* navigations
***********************************************************/
/* rubricator */
nav.rubricator {
	width:141px;
	text-align:right;
	padding:10px 10px 20px;
	border-right:solid 1px #ff8000;
}
.rubricator ul {
	list-style:none;
	margin:0;
	padding:0;
}
.rubricator img {
	display:block;
	margin:0 auto;
}
.rubricator a {
	color:#999;
	text-decoration:none;
	display:block;
}
.rubricator li:hover a {color:#222}
.rubricator li:hover ul li a {color:#999}
.rubricator li:hover ul li a:hover {color:#222}
.rubricator .current-cat a, .rubricator .current-menu-item a, .rubricator lu ul li.current-menu-item a {
	color:#222;
	cursor:default;
}
.rubricator .current-cat ul li a, .rubricator .current-menu-item ul li a  {cursor:pointer}

/* droopdown menu */
.rubricator ul li {position:relative}
.rubricator ul li ul {
	opacity:0;
	display:none;
	position:absolute;
	top:0px;
	left:100%;
/*	width:0px;
	height:0px;
	margin:0 0 0 20px;*/
	overflow:hidden;
	text-align:left;
	-webkit-transition-duration: 600ms;
	-webkit-transition-property: width, height, margin, opacity;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, height, margin;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, height, margin;
	-o-transition-timing-function: ease;
}
.rubricator ul li:hover ul {
/*	width:110px;
	height:100px;
	margin:0;*/
	padding-left:20px;
	opacity:1;
	display:block;
}
.rubricator ul li ul::before {
	position:absolute;
	content:"\25c4";
	top:0px;
	left:5px;
}
.rubricator ul li ul li {
	background:#eee;
	padding:0 20px;
}
.rubricator li:last-child a {
	color:#00f;
}


/* servises */
nav.servises {
	width:123px;
	padding:20px 10px 10px;	
	left:864px;
	bottom:54px;
	position:absolute;
	text-align:left;
}
.servises::before {
	position:absolute;
	left:-80px;
	right:0;
	bottom:-1px;
	content:"";
	border-bottom:solid 1px #ff8000;
}
.servises::after {
	position:absolute;
	left:0px;
	top:0px;
	bottom:-30px;
	content:"";
	border-right:solid 1px #ff8000;

}
.servises ul {
	list-style:none;
	margin:0;
	padding:0;
}
.servises a {
	color:#999;
	text-decoration:none;
}
.servises a:hover {color:#222}

/* Search Form on servises menu */
.servises #s {
	margin:0 0 -1px -5px;
	padding-left:2px;
	border:solid 1px transparent;	
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background, margin, border;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background, margin, border;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background, margin, border;
	-o-transition-timing-function: ease;
	width: 72px;
	font-size:1.2em;
	line-height:1;
}
.servises #s:hover {border:solid 1px #222;}
.servises #s:focus {
	background-color: #f9f9f9;
	width: 196px;
	margin:0 0 -1px -124px;
	outline:none;
	border:solid 1px #222;
}
.servises #searchsubmit, .assistive-text {display: none;}

/* main content
**************************************************************/
.main_logo {
	text-align:center;
	padding: 100px 0;
}
article {padding:27px 10px 10px}

.postmetadata {
	font-weight:bold;
	text-align:right;
}
.page404 {
	padding:100px 50px;
}
.search_query {
	font-size: 12px;
	background:#ff9;
	padding:0 5px;
}
.pagination {padding:0 10px;}
/* comments */
#commentform  textarea {
	width:680px;
	height:100px;
}

/* footer
*************************************************************/
footer {
	clear:both;
	border-top:solid 1px #ff8000;
	position:relative;
	text-align:center;
}
footer section {
	float:none;
	margin:0 auto;
	text-align:left;
}

footer p {
	margin:0;
	padding:0 10px;
	font-size:0.8em;
	
}
footer img {
	width:88px;
	height:31px;
}


/* floating and cleaning 
*************************************************************/
.left {float:left}
.right {float:right}
.bold {font-weight:bold}
.group:after{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility:hidden;
}
/*  6 */
*html.group {height:1%;}
/*  7 */
*:first-child+html.group {min-height:1px;}

/* feedback
*************************************************************/
.vcard  b{font-weight:bold}
.vcard  i{font-style:italic}
.vcard img {
	float:left;
	margin-right:5px;
	vertical-align:top;
}
.feedbacklist p {
	background:#eee;
	padding:5px;
	margin:0;
}
.feedbacklist {list-style:none; padding:0}
.feedbacklist ul {list-style:none}
.feedbacklist .reply {padding-bottom:20px}

/* extra styles
*************************************************************/
img.alignleft {
	float:left;
	margin: 0 10px 0 0;
}
img.alignright {
	float:right;
	margin: 0 0 0 10px;
}
.wp_syntax {border:none !important}

.iLikeThis { padding-bottom:5px;text-align:center;margin:-5px 0 -23px}
.iLikeThis .counter { background:url(heart.png) center left no-repeat; padding:0 0 0 20px; font-weight:bold; }
.iLikeThis .counter a { cursor:pointer; }
.iLikeThis .counter a.image { background:url(Thumb-Up.png) center right no-repeat; padding:0 20px 0 0; }

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

 

[styoplotr 514]

Молодец, все классно расписал, я как раз подумывал написать о gulp-e

 

Для тех кто не хочет устанавливать gulp  на сервере

1. Gulp не нужно устанавливать на шаред хостинге, сжимаешь у себя как нужно и загружаешь.

2. Лично я храню скрипты и стили в 2 видах, сжатые и не сжатые, в не сжатых работаешь, потом gulp сам сжимает и заливает в папку minified (например) и оттуда уже подключаю.

3. Gulpfile не нужно каждый раз запускать, работают watcher-ы, нажал ctrl+s в своем рабочем файле и забыл, то есть ничего дополнительного делать не нужно.

[federal24 195]

Все происходит автоматически? То есть сжимаешь файлы, старые удаляешь и новые работают? Или нужно вручную "пути прописывать"?

[node.js 103]

.........потерто, дубль

[node.js 103]

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

По поводу путей после компиляции, нет, менять пути не надо, у вас есть указанный путь /compiled/ там и будут все ваши файлы храниться, меняться, обновляться.

 

styoplotr, да можно и так запускать, на время разработки пока пишешь код я именно так и делаю, но при бездействии кажись суток произойдет kill данного процесса, и как следствие придется вновь запускать если потребуется. Ну это уже не о gulp, а устройствах операционных систем =) 

 

valentino, я написал инструкцию по установке, там же просто нужно зайти по ssh и выполнить данные команды =) Специально для новичков писал, хотя я и сам то не про. На счет портянки стилей, конечно можно писать и так, но поиск участка кода возможен только по Ctrl+F и перебором всей совпадений в поиске чего либо, это не удобно, да и не правильно совсем, потому что есть вариант что то пропустить или не углядеть. Второй недостаток это вес файла, если разместить файл в такой виде, да еще и с комментариями, то файл будет весить от 500кб и выше. Страница сайт весит 80кб, а файл стилей за 500 + еще JS файл на мегобай и получается наш сайт весит 1.5МВ. 

Опят таки, если данный файл раскидать по файлам с приемлемыми именами, скажем есть настройки пагинации, я захожу  папку /style/ и вижу файл pagination.css, я знаю что именно  и только в нем настройки пагинации и такой файл состоит всего из Комментария и 10-20 строк кода, который можно будет поправить без труда, а не искать его в во всем многообразии стилевых настроек в одном файле.

Ну допустим вы его сжали онлайн сервисами, и он стал меньше весить, так же как после переработки gulp. У меня был печальный опыт, я хранил на сервере большую портянку стилей и сжатую копию отдаваемую конечному пользователю. Через месяц мне понадобилось поправить блок поста, я знал где находится этот участок в сжатом коде, в нем поправил, а в оригинале нет, мне было лень там править (да и сжимать его нужно было по новой), потому что проект то уже написан и работает и вряд ли я буду делать какие то серьезные правки в нем ))) на тот момент я именно так и думал, и поправил только в сжатом файле. Через месяц еще сделал правки, потом еще, в итоге решился на серьезные переделки. Оригинальный файл при этом уже не был актуальным и его правка возвращала меня на пол года назад когда был проект разработан, мне пришлось сжатый файл форматировать онлайн сервисом, но подсказки пропали и найти что либо было очень сложно. Это была головная боль. Так же и с JS, только там по сравнению с .css не все так радужно, имена переменных меняются при сжатии для сокращения код, по сути если файл вновь привести к нужному виду тем же http://www.danstools.com/, то имена переменных так и останутся сокращенными, а подсказки? А в JS если нет подсказок то проще все заново переписать чем разбираться в логике и искать все цепочки.

 

files, она имена переменных в JS не возвращает обратно, так же как и сами подсказки, описания настроек. Хотя я этим сервисом пользовался и не раз, хороший проект.

 

Вопрос автору - а если на проекте используются несколько наборов стилей и js для разных разделов сайта?

 

Из минусов данного решения я вижу следующие:

1. Установка и настройка node.js - шаред-хостинги все это позволяют сделать?

2. Необходимость каждый раз запускать gulpfile.js для компиляции проекта.

3. Дополнительные настройки gulpfile (танцы с бубном), если на проекте используются разные наборы css и js.

 

Как альтернативу описанному способу можно использовать php-класс ("php minify js" => первый в гугле), который не требует установки дополнительных пакетов, а настройки по-умолчанию подойдут для большинства сайтов. Небольшая доработка класса "напильником" позволит добиться автоматического сброса кеша при внесении изменений в файлы css и js.

Ничего страшного, пропишем 2 пути и будут созданы два разных файла, можно и 3 и 5 и 10 разных файлов сделать. Просто в path будут идти разные пути, к примеру

var path = {
    'scriptScreen': [
        './static/plugins/menu/script.js',
        './static/js/cookie.js',
        './static/js/auth.js',
        './static/js/comments.js',
        './static/js/slider.js',
    ],
    'cssScreen': [
        './static/css/screen.css',
        './static/css/header.css',
        './static/plugins/menu/css/style.css'
    ],
    'cssCatalog': [
        './static/css/catalog.css',
        './static/css/block-news.css'
    ],
    'dist': './static/compiled'
};

Ну и соответственно создать таск по аналогии с таском cssScreen. И будет создано два файла.

Еще момент, gulp клеит файлы по очередности, так как они прописаны в переменной path.

 

1. Шаред хостинги вобще ничего не позволяют, они предлагают пользоваться только тем что у них есть и чем они разрешают пользоваться, а данный ассортимент возможностей на столько мизерный что даже и думать об этом не хочется =). И как вы писали о php minify js, его на шареде тоже не поставить.

2. Нет, можно и не запускать, если добавить демон, ну или как то не убивать процесс, есть очень много npm для этого, да и для самого gulp всего скорее есть решение, мне это просто ну нужно, я и не искал информацию по данному поводу.

3. Никаких танцев с бубном, там все понятно и чисто как капля росы.

 

На счет PHP, я понимаю что сие "чудо" юзают до сих порт, потому что он на всех хостингах по умолчанию стоит, но для меня PHP уже давненько умерло, сейчас меня закидают шкурками от бананов но все такие напишу что PHP давно в прошлом, сейчас есть более интересные и более быстрые технологии которыми нужно пользоваться. Я жалею что я потратил 2 года работая на PHP, хотя кто знает, может в скором времени они выкатят более интересно решение чем технологии начала 2000 годов, да и предпосылки к этому авторы уже кидали, я где то читал об этом.

[styoplotr 514]

да можно и так запускать, на время разработки пока пишешь код я именно так и делаю, но при бездействии кажись суток произойдет kill данного процесса, и как следствие придется вновь запускать если потребуется. Ну это уже не о gulp, а устройствах операционных систем =) 

 

Мне не приходилось писать код больше суток подряд)) gulp-nodemon или просто forever легко решают эту проблему

 

На счет PHP, я понимаю что сие "чудо" юзают до сих порт, потому что он на всех хостингах по умолчанию стоит, но для меня PHP уже давненько умерло, сейчас меня закидают шкурками от бананов но все такие напишу что PHP давно в прошлом, сейчас есть более интересные и более быстрые технологии которыми нужно пользоваться. Я жалею что я потратил 2 года работая на PHP, хотя кто знает, может в скором времени они выкатят более интересно решение чем технологии начала 2000 годов, да и предпосылки к этому авторы уже кидали, я где то читал об этом.

 

Не жалейте, еще много где пригодится, у нода нет cms которые могли хоть как то близко подойти к wordpress, нет таких фреймворков как yii где можно одним генератором собрать половину проекта. Node не так стабилен и не так расжеваны все задачи как в PHP.

[node.js 103]

Мне не приходилось писать код больше суток подряд)) gulp-nodemon или просто forever легко решают эту проблему

 

Не жалейте, еще много где пригодится, у нода нет cms которые могли хоть как то близко подойти к wordpress, нет таких фреймворков как yii где можно одним генератором собрать половину проекта. Node не так стабилен и не так расжеваны все задачи как в PHP.

Да я свои проекты именно forever`ом держу.

Знания PHP конечно пригодятся, но у меня до сих порт остался осадок в переобучении самого себя под JS, все таки синхронность и асинхронность очень сильно влияют на ход программирования, и я до сих пор что то пытаюсь писать синхронно по привычке, а это не правильно когда пишешь на Node.JS

 

На счет стабильности ноды, есть три проекта, один уже 2 года на ней работает, полет нормальный =) Там вся суть стабильности заключается лишь в правильной обработке ошибок. Сам Node.js сейчас стабилен, да там собственно в ней особого то ничего и нет, все необходимое собирается манагером )))

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

 

Вобщем советую поработать с нодой и провести тесты, я когда тестил PHP+MySQL и Node.JS+MongoDB своим глазам не верил что такое вобще возможно )))