Показаны сообщения с ярлыком javascript. Показать все сообщения
Показаны сообщения с ярлыком javascript. Показать все сообщения

воскресенье, 25 января 2015 г.

Настройка на gulpfile.js

Удивительную и несравненную индийскую кухню невозможно представить без экзотических специй: есть у южан масала для овощей, есть для риса, для рыбы, птицы и мяса, есть и масала–чай. Но это не полный перечень многообразий и разновидностей. Дело в том, что каждая хозяйка в каждом доме имеет свой собственный рецепт масалы для овощей, риса, мяса и всего прочего — нередко этот рецепт трепетно и бережно передаётся из поколения в поколение, как в европейских аристократических фамилиях передаётся столовое серебро.

Эти самые масалы прижились и на Ближнем Востоке: в бакалейных отделах супермаркетов можно увидеть ряды, уставленные картонными пачками с готовыми смесями. Впрочем, в арабском мире эти наборы могут иметь и другие имена: например, я охотно пользовался ливанской смесью, называемой «за′атар» (или «загатар», если читать это слово по правилам чтения украинского языка — в арабском тоже есть фрикативный звук «г»). Как бы там ни было, но восточные базары, включая «супербазары» (то есть, супермаркеты) предоставляют достаточный ассортимент специй (например, см. фото в начале статьи), чтобы составить композицию приправ — масалу — на любой, даже самый взыскательный, вкус.

Я, вот, тоже решил замесить свою gulp—«масалу» для автоматизации работы над сайтом, но приступил к работе не с чистого листа, а разбирая и отлаживая уже имеющийся файл сценариев gulpfile.js из весьма неплохого набора WebStarterKit 0.5.2 от Google.

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

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

$.useref();

Оказалось, что этот инструмент загружает (в базовом gulpfile) 17 плагинов, имена которых начинаются с «gulp» — вроде бы, ничего особенного, но при изменении набора этих самых плагинов (удалении ненужных и добавлении необходимых), они неизменно будут «подтягиваться» в скрипт по списку установленных пакетов, имеющихся в из package.json. А вызывается загруженный с помощью этого загрузчика плагин как некий метод: в приведенном выше примере вызывается плагин gulp-useref.

По умолчанию, gulp-load-plugins загружает плагины, соответствующие маске «gulp-*», но эту маску можно изменить. Разработчики рассматриваемого gulpfile.js, по какой–то причине, не стали этого делать и часть плагинов загружают «руками», то есть, путём явного указания имён. Не вдаваясь в причины подобной избирательности, я решил следовать той же тактике (по крайней мере, пока).

В дальнейшем, после вдумчивого и неторопливого сравнения моего первичного перечня плагинов и предлагаемого гугловскими экспертами, мой файл gulp–настроек (package.json) обогатился такими приобретениями:

  • gulp–cache — создание промежуточного временного файла;
  • gulp–changed — отслеживание изменённых файлов;
  • gulp–csso — оптимизация и минимизация CSS–файлов;
  • gulp-if — управление выполнением задачи по условию;
  • gulp-jshint — проверка файлов сценариев Javascript на наличие ошибок;
  • gulp-replace — замена строки;
  • gulp-size — вывод сведений о размере проекта или составляющих его файлов;
  • gulp-useref — редактирование ссылок на используемые ресурсы (css, javascript) с учётом изменений конечных имён файлов;
  • jshint-stylish — дополнение к плагину gulp-jshint, позволяющее выводить разработчику более содержательные описания выявленных ошибок;
  • psi — тестирование компонентов проекта и вывод подробной информации о проекте;
  • run-sequence — запуск нескольких задач gulp последовательно или параллельно.

Оказались невостребованными шесть плагинов из упоминавшихся в гугловском файле сценариев:

  • apache-server-config, gulp–flatten и opn — плагины установлены (имеются в файле конфигурации package.json), но не упоминаются в базовом gulpfile.js, то есть, нет практической надобности в их использовании;
  • browser-sync — дублирует функциональность gulp-livereload;
  • require-dir — подключает файлы из указанной в аргументах папки, но пока подключать нечего;
  • gulp-ruby-sass — дублирует функциональность Scout.

Кроме того, из первоначального набора, составленного при установке gulp, удалены пакеты:

  • gulp-autoprefixer и gulp-sass — дублируют функциональность Scout;
  • gulp-browserify, gulp-notify и gulp-util — не нашлось применения.

А ещё угроза удаления нависла над плагинами из первоначального набора, которые, похоже, дублируют утилиты из нового набора (WebStarterKit):

  • gulp-concat и gulp-rename, похоже, дублирует gulp-useref;
  • gulp-filesize — gulp-size;
  • glob вроде бы, нигде не используется, но вдруг пригодится….

суббота, 12 апреля 2014 г.

Подключение скриптов и стилей

Не так, чтобы это было крайне необходимо, но неуёмная тяга к прекрасному заставила меня сотворить некоторые усовершенствования и без того очень гибкой блог–платформы Blogger от Google, где мы сейчас, собственно, и присутствуем. Дело в том, что по ходу повествования о своём тернистом пути к возрождению незаслуженно заброшенного сайта, мне предстоит публиковать какие–то фрагменты скриптов и стилей, и хотелось бы делать это так, чтобы это радовало глаз почтенного читателя.

С помощью всё того же Гугла разыскал я JQuery–библиотеку под названием плагин JQuery Sintax Highlight для «красивизации» кодов, написанных на различных языках программирования (мне могут потребоваться Javascript, CSS, PHP и SQL).

Но вот незадача: установочный пакет этого плагина (и, кстати, многих других) требуется скопировать на сервер, на котором размещён сайт, однако, для моего случая (сайтом является блог на Blogger) возможность загрузки файлов скриптов и таблиц стилей Гуглом не предусмотрена. Тем не менее, решение нашлось.

Среди услуг, предоставляемых Гуглом имеется сервис для размещения и хранения документов — облачное хранилище Google Drive. Если у вас есть аккаунт на Google (например, почта), значит у вас есть и Google Drive.

Запустить этот сервис можно нажав на квадратик из точек в правом верхнем углу панели Google (см. скриншот вверху) и выбрав из выпадающего окна иконку «Диск» После этого можно создать папку для своих скриптов (у меня это папка jquery) — именно для этого и существует красная кнопка «Создать», перейти в созданную папку и, нажав на меньшую безымянную красную кнопку (со стрелкой вверх), примыкающую к кнопке «Создать», загрузить требуемые файлы (в рассматриваемом случае это файл скрипта jquery.highlight.js и сопровождающий его файл стилей jquery.highlight.css, заранее взятые из репозитария).

Следующий этап — «разблокирование» файлов для всеобщего доступа: по умолчанию, при загрузке доступ к файлу имеет только его владелец. На скриншоте вверху для файла установлен наивысший уровень доступа: «Общедоступно в Интернете» (любые другие варианты у моего блога вызывали острое неприятие и скрипт просто не загружался на страницу). Кстати, если вы создаёте отдельную папку для своих скриптов (как моя jquery) и на неё устанавливаете требуемый доступа, то все загружаемые в эту папку файлы тоже будут «общедоступны в Интернете» (нужно будет только подтвердить это в диалоговом окне после загрузки).

Очень важный этап — переделка адреса ссылки на загруженные файлы. Гугл генерирует ссылку примерно такого вида (находится в поле «Совместный доступ»):

https://drive.google.com/file/d/0D-SchqSURoSlR2Mk0Vm12GJSWcy/edit?usp=sharing

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

https://googledrive.com/host/0D-SchqSURoSlR2Mk0Vm12GJSWcy

На этом упражнения с Google Drive можно было считать законченными и переходить к водным процедурам, но остался совсем небольшой этап: вставить в шаблон блога ссылки на загруженные файлы (ведь ради этого и затевался весь сыр–бор).

Первым делом, выберите в боковом меню вашего блога позицию «Шаблон». После этого очень многие начинающие (а зачастую и продолжающие) блогеры сразу же, смело и решительно заходят в святая святых, нажимая на кнопку «Изменить HTML». Наш путь, по большому счёту, лежит туда же, но сначала предпримем простой и необременительный шаг для обеспечения собственной безопасности — нужно сделать резервную копию шаблона, для чего и предусмотрена кнопка «Резервное копирование и восстановление» на той же странице.

Последуйте мудрому совету разработчиков платформы Blogger — «загрузите шаблон полностью», как предлагает надпись на кнопке диалогового окна и, если вдруг какие–нибудь ваши камлания над блогом приведут к фатальному перекосу в его работоспособности, вам не придётся в отчаянии рвать на себе пучками волосы, стеная от душевной боли по невосполнимой утрате и физической боли, неизбежно сопровождающей столь варварский способ эпиляции.

Теперь, если вы сохранили шаблон вашего блога, можно заходить в режим «Изменить HTML» и вставить в любое место шаблона между тегами <head> и </head> строки, сконструированные вами на предыдущем этапе, следя за тем, чтобы они не попали внутрь тела какого–либо условного выражения (я это делаю сразу после <title> и </title>):

<title><data:blog.pageTitle/></title>
<script language='JavaScript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>
    
<!-- jquery.highlight.js и jquery.highlight.css -->
<script language='JavaScript' src='http://googledrive.com/host/0B-SczaUpoUUY5SlkhqVm12GJS2g'/>
<link type="text/css" rel="stylesheet" media="all" href="http://googledrive.com/host/0B-SchqVm12GJT2pYaUtJd2UydlU" /> 

Для того, чтобы скрипт заработал, то есть, начал искриться и переливаться своими причудливыми красками, требуется:

  • подключить библиотеку jquery.js (или её уплотнённый вариант jquery.min.js — строка №2 в верхней врезке кода),
  • вставить туда же (между тегами <head> и </head>) ещё один фрагмент кода:
<script language='JavaScript'>
 $(document).ready(function(){
  $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol',attribute: 'data-language'});
 });
</script>

Теперь осталось поместить код между тегами <pre class="code"> и </pre> — обязательно нужно указать имя класса и можно указать название языка, который находится в контейнере (допускаются варианты html, js, php, css и sql):

<pre class="code" lang="html"> <p>Привет, мир!</p> </pre>

Как наверняка уже догадался мой проницательный читатель, все примеры отображены уже с помощью плагина подсветки синтаксиса JQuery Sintax Highlight, то есть поставленная в начале статьи задача выполнена. Но в заключение должен сделать несколько замечаний. Во–первых, в первом контейнере указаны произвольные идентификаторы на файлы скрипта и таблицы стилей: вам нужно будет сформировать и свои собственные на Google Drive, поскольку эти — не рабочие.

Во–вторых, перед вставкой в контейнер HTML–кода необходимо предварительно преобразовать символы < и > в HTML–тегах на &lt; и &gt;, соответственно. Для этих целей удобно использовать онлайн перекодировщики, например, этот. В–третьих, кол, приведенный во втором контейнере ($(document).ready(function()…) тоже можно поместить в отдельный файл, загрузить этот файл на Google Drive, сформировать ссылку по изложенному в этой статье алгоритму и включить в заголовок документа в виде <script language='JavaScript' src='http://googledrive.com/host/[идентификатор файла]'/>.

пятница, 11 апреля 2014 г.

Начинаю начинать

Встречают, как говорится, по одёжке, а «одёжка» моего сайта, над которой я долго и старательно корпел, по прошествии бурных лет перестала ласкать мой взор (скриншот бывшей стартовой страницы приведен выше). Другими словами, дизайн придётся переделать. «Однозначно» © В.В.Жириновский.

Тусклые оттенки и неуёмная тяга к градиентам, конечно же, была навеяна вечной дымкой – то ли от невероятно жаркого воздуха, то ли из–за пылеобразного песка поднимающегося при малейшем ветре и долго висящего в воздухе, вызывая «скржет зубовный». Отдохнувший от пустынных пейзажей за пару лет глаз, при новом обследовании дизайна решительно отказался от унылости и было принято решение несколько откорректировать гамму: заменить фон, уйти от грязноватых жёлто–голубых градиентов, слегка перекомпоновать страницу. Впрочем, полностью отказаться от градиентов не получилось и в центральной колонке всё–таки остался бело–жёлтый представитель. На всякий случай, так сказать.

Перво–наперво, предстоит изменить кодировку сайта: четыре года тому назад было совсем нестыдно делать сайт в кодировке CP-1251, а теперь — всё, что не UTF-8 считается чуть ли не признаком дурного тона. Это тенденция понятна, разумна и приемлема, поэтому придётся ей следовать.

Была мысль перенести весь сайт на какой–нибудь популярный движок CMS, например, Joomla, но под каждый раздел сайта в своё время были написаны уникальные скрипты и отказываться от них я не намерен. А вот их «перековка» под неродную систему может вылиться в несоизмеримые трудовые затраты. Тем более, что я настолько комфортно чувствую себя в компании библиотек XTemplate и DBSimple, что буду сильно печалиться и тосковать, если Джумла их не примет в своё лоно.

Ещё нужно будет «вычистить» из PHP–скриптов весь текст, который должен выводиться в браузер. Идеальным является решение с использованием функционала GetText, но затеваться на моноязычном сайте с системой, предназначенной для многоязычных, вряд ли разумно. Гораздо проще завести набор .INI файлов для определения всех требуемых значений. Так и сделаю.

Про систему комментирования статей я уже писа́л — решение почти найдено и его остаётся только воплотить. «Почти» — потому, что нужно дополнительно определиться с системой подключаемых комментариев: например, по Хабрахабру гораздо предпочтительнее (по сравнению с Disqus) смотрится Cackle, а ещё хвалят HyperComments (хотя в бесплатной версии очень скромная функциональность).

Продолжаются раздумья насчёт целесообразности изменения библиотеки для работы с миниатюрами и изображениями реального размера. В первой версии сайта используется Highslide на «чистом» Javascript и «весом» около 275К, но в новой редакции «Заливной рыбы» интенсивно применяется надстройка JQuery (ну, очень мне нравится!), и логично было бы использовать соответствующую библиотеку. Выбор пал на PicBox на JQuery, которая имеет размер около 30К, правда, требует вспомогательную библиотеку JQueryUI (ещё 60К в сжатом виде).

И это — только то, что лежит на поверхности! Хочется надеяться, что пока ещё невидимых подводных камней будет не слишком много. Вам тоже интересно? Тогда, «следите за рекламой»!