Вы здесь

Compass + Sourcemap + Firefox и причем тут Drupal?

Предыстория

Я давно пользуюсь CSS препроцессором Compass и недавно решил расширить инструментарий. Первым шагом было добавление sourcemap-ов... Что оно нам дало? Удобство при верстке.

т.е. мы видим реальное расположение стилей... об этом можно погуглить... (в кратце: добавляем в config.rb строку sourcemap = true... у меня вот так выглядит строка sourcemap = (environment == :production) ? false : true ).

Все было хорошо, пока я не наткнулся на статью(сейчас не вспомню ссылку, но было что-то типа этого), которая навела меня на мысль часть верстки писать сразу из браузера... Мой любимый браузер - Firefox. И он "подставил" меня. Точнее не Firefox а sourcemap + compass. Отсюда подробнее...

Проблема

При генерации sourcemap-ов все mixin-ы из compass-а, которые были использованы в проекте так же попадают в файл .css.map (пример: ../../../../../../../../../../usr/local/rvm/gems/ruby-2.2.1/gems/compass-core-1.0.3/stylesheets/compass ...), что приводит к проблеме, при переключении во вкладку Стили (Style editor).

Браузер пытается загрузить файл стилей из sourcemap, не может найти его, выдает ошибку. И тут в игру вступает Firefox - он тупо останавливает загрузку остальных файлов из sourcemap. Зачастую - все пользовательские стили не подгружаются, а это означает, что редактирование из браузера не возможно. Первым делом я начал гуглить, решения не нашлось. Но мы же не сдаемся?

Идея

  1. Первое, что лезло в голову, как-то настроить генерацию sourcemap-ов, чтобы эти пути не включались... безуспешно.
  2. Позже меня настигла гениальная идея написать мини-программу, которая будет "исправлять" map файлы... хорошо, что времени не было на это...
  3. Решил забить на эту идею и работать дальше.
  4. Случайно пришла идея когда обсуждали полезность/бесполезность compass-а в телеграм чате http://t.me/drupal_rus ...

Идея в следующем. Содержимое mixin-ов нам по сути не нужно, т.к. редактировать мы будем стили, которые сами написали(мы ведь помним, что данный функционал мне нужен для того, чтобы редактировать css файлы из браузера).

По скрину с ошибкой (см. выше) видно, что запрос идет по пути /usr/local/rvm/gems/ruby... не знаю как у вас, но у меня по такому пути страниц никогда не будет. Вот и сама идея, при запросе по адресам /usr/local/rvm/gems/ruby-2.2.1/gems/% возвращать валидный(для браузера) css, и будет счастье.
И тут в игру вступает Drupal(примечание: речь о 7ой версии, но думаю не проблема будет реализовать на 8ую версию данный функционал).

Решение

Первым шагом было написание модуля, который обрабатывает нужные пути...

/**
 * Implements hook_permission().
 */
function gsourcemap_permission() {
  return array(
    'gsourcemap development' => array(
      'title' => t('Access sourcemap placeholder'),
      'description' => t('Allow access to sourcemap placeholder settings and data.')
    ),
  );
}

/**
 * Implements hook_menu().
 */
function gsourcemap_menu(){
  $items['usr/local/rvm/gems/ruby-2.2.1/gems'] = array(
    'title' => 'gSourcemap settings',
    'page callback' => 'gsourcemap_placeholder',
    'access arguments' => array('access devel information'),
    'type' => MENU_CALLBACK
  );
  return $items;
}

function gsourcemap_placeholder(){
  $args = func_get_args();
  drupal_add_http_header('Content-Type', 'text/css');
  // Тут выводим информацию, чтобы в будущем знать какой из файлов мы "утаили".
  print '// this is gsourcemap placeholder for ' . implode('/' , $args);
  exit;
}

все работает, круто... и тут мысль, а вдруг поменяется конфигурация сервера, путь изменится, придется переписать модуль, а этого я делать не люблю...
Добавим возможность указывать путь в админке...


/** * Implements hook_menu(). */ function gsourcemap_menu(){ $items['admin/config/development/gsourcemap'] = array( 'title' => 'gsourcemap settings', 'page callback' => 'drupal_get_form', 'access arguments' => array('access devel information'), 'page arguments' => array('gsourcemap_settings_form'), ); // Тут схитрим, чтобы не бремить себя и других писать со слешем или без... $gsourcemap_path = trim(variable_get('gsourcemap_path', FALSE), '/'); if($gsourcemap_path){ $items[$gsourcemap_path] = array( 'title' => 'gSourcemap settings', 'page callback' => 'gsourcemap_placeholder', 'access arguments' => array('access devel information'), 'type' => MENU_CALLBACK ); } return $items; } function gsourcemap_settings_form(){ $path = variable_get('gsourcemap_path', ''); $form['gsourcemap_path'] = array( '#type' => 'textfield', '#title' => 'Source paths for placeholder', '#default_value' => $path, '#required' => TRUE, ); $form['actions'] = array('#type' => 'actions'); $form['actions']['rebuild'] = array( '#type' => 'submit', '#submit' => array('gsourcemap_settings_form_submit'), '#value' => t('Save') ); return $form; } function gsourcemap_settings_form_submit(&$form, &$form_state){ // Сохраним данные, используем сабмит от system_settings_form(). system_settings_form_submit($form, $form_state); // Нужно сбросить кеш меню, чтобы настройка применилась... menu_rebuild(); drupal_set_message(t('Menu cacge rebuilded.')); }

Теперь заходим на страницу настроек admin/config/development/gsourcemap, указываем путь (к примеру usr/local/rvm/gems/ruby-2.2.1/gems) и сохраняем.
Теперь каждый раз, когда браузер ищет файлы compass-а, модуль ему их "отдает"... ошибок нет, все грузится...

Ну и сам модуль в песочнице на drupal.org.. вдруг кому понадобится.

P.S.

Редактирование из браузера - дело простое. В моем случае NetBeans автоматически отправляет на сервер все изменения. Когда основная верстка готова, и нужно подправить 1 или 2 элемента, я просто исправляю в DevTools - е нужные стили, для этого кликаю по названию файла(см. картинку) и вношу правки во вкладке "Стили".

После чего Ctrl+S- и выбираю сохраненный одноименный файл в папке проекта NetBeans. После чего изменения сразу отправляются на сервер. А там включенный compass watch, который отслеживает изменения и компилирует css... Замечу, что выбирать локальный файл нужно только 1 раз для 1 файла, дальше браузер запомнит ваш выбор.

p.p.s. не судите строго, опыта написания объемных статей нет, если где-то непонятно, или некорректно объяснил, пишите, исправлю и отвечу на все вопросы.

Так же можете задавать вопросы в телеграм чате http://t.me/drupal_rus

6
1
05.02.2017 - 06:51

Комментарии

Аватар пользователя Владимир Крыгин
deadie – 20.02.2017 - 08:02

костыляние.. gulp'ом не пробовали пользоваться?