Jump to content

node.js

Members
  • Content Count

    207
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Like
    node.js got a reaction from campusboy in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  2. Like
    node.js got a reaction from witosp in Сжимаем и совмещаем CSS/JS на лету   
    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, которая будет указывать на ваши ошибки
  3. Like
    node.js reacted to styoplotr in Сжимаем и совмещаем CSS/JS на лету   
    Мне не приходилось писать код больше суток подряд)) gulp-nodemon или просто forever легко решают эту проблему
     
    Не жалейте, еще много где пригодится, у нода нет cms которые могли хоть как то близко подойти к wordpress, нет таких фреймворков как yii где можно одним генератором собрать половину проекта. Node не так стабилен и не так расжеваны все задачи как в PHP.
  4. Like
    node.js got a reaction from SeoSergey in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  5. Like
    node.js got a reaction from zinalab in Копируют статьи с сайта   
    Приходишь такой и говоришь: У меня рерайт скопировали и разместили на другом сайте 

     
    Если авторство не закреплено, то и ничего вы не сделаете, максимум можно потролить владельца и хостера, если хостер ломо, то пригрозит вебмастеру, нормальный нажмет (образно) Delete.
    Если парсят скриптами, проставьте ссылки на разделы сайта, и радуйтесь что ваша статья разлетается по рунету, только естественных беков получите =)
  6. Like
    node.js reacted to witosp in Копируют статьи с сайта   
    Только вот источник не всегда тот кто источник 
  7. Like
    node.js reacted to Olexandr in Копируют статьи с сайта   
    Как можно доказать авторство при рерайте? Очень интересен Ваш механизм.
  8. Like
    node.js reacted to files in Сжимаем и совмещаем CSS/JS на лету   
    Кстати, для таких целей есть такая штуковина: http://www.cleancss.com/javascript-beautify/
  9. Like
    node.js reacted to styoplotr in Сжимаем и совмещаем CSS/JS на лету   
    Молодец, все классно расписал, я как раз подумывал написать о gulp-e
     
    Для тех кто не хочет устанавливать gulp  на сервере
    1. Gulp не нужно устанавливать на шаред хостинге, сжимаешь у себя как нужно и загружаешь.
    2. Лично я храню скрипты и стили в 2 видах, сжатые и не сжатые, в не сжатых работаешь, потом gulp сам сжимает и заливает в папку minified (например) и оттуда уже подключаю.
    3. Gulpfile не нужно каждый раз запускать, работают watcher-ы, нажал ctrl+s в своем рабочем файле и забыл, то есть ничего дополнительного делать не нужно.
  10. Like
    node.js got a reaction from styoplotr in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  11. Like
    node.js got a reaction from saskozp in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  12. Like
    node.js got a reaction from k-park in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  13. Like
    node.js got a reaction from desg in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  14. Like
    node.js got a reaction from webostrov in Вопрос по поводу Title. Двоеточие.   
    Ну вроде как яндекс понимает что counter strike это cs, тогда и смысла сокращенно писать нету
  15. Like
    node.js got a reaction from Priest in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  16. Like
    node.js got a reaction from witosp in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  17. Like
    node.js got a reaction from vertas52 in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  18. Like
    node.js got a reaction from serjin in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  19. Like
    node.js got a reaction from Griffin in Сжимаем и совмещаем CSS/JS на лету   
    Данная тема посвящается в основном новичку или тем кто не знаком с новыми технологиями и возможностями некоторыми серверными плюшками и не только. И да эта тема именно для оптимизации сайта и именно здесь ей место.
     
    При построении очередного сложного проекта мы зачастую создаем кучу файлов 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.
     
    ПС. хотел покороче, но вышло как всегда =(
  20. Like
    node.js got a reaction from eKawazoe in Вопрос по поводу Title. Двоеточие.   
    По сабжу, я конечно не сеошник, но по моему нахождение в титле css, это явно не игровая тематика, почему не написать расшифровку?
  21. Like
    node.js got a reaction from raynar in Вопрос по поводу Title. Двоеточие.   
    По сабжу, я конечно не сеошник, но по моему нахождение в титле css, это явно не игровая тематика, почему не написать расшифровку?
  22. Like
  23. Like
    node.js reacted to federal24 in Помогите изменить цвет картинки   
    Вот она:

    Красиво смотрится на белом фоне)))
  24. Like
    node.js reacted to Qiwin in Помогите изменить цвет картинки   
    Помог бы, но я с телефона
  25. Like
    node.js got a reaction from Aledor in Как закрыть ссылки от индексации?   
    Как то давно на phpbb юзал роботс где было все закрыто и открыты топики и темы с мордой, дублей вобще не было, а роботс был на строк 5-7 всего =)
×
×
  • Create New...