less // source maps

12/09/2013

Привет! Например, так видим CSS код без source maps:

Готовая картинка Qatar Airways

Не видно из какого less файла берутся стили, есть только reference на собранный core.css файл. Нужно активировать source maps. Подключим source maps, для этого добавим в Gruntfile.js поддержку Source maps:

less: {
   dev: {
      options: {
         paths: ["assets/css/config", "assets/css/modules", "assets/css/modules/icheck/minimal"]
         sourceMap: true,
         sourceMapFilename: '/assets/css/core.css.map',
         sourceMapRootpath: ''
         //compress: true
      },
      files: {
         "assets/css/core.css": "assets/css/core.less"
      }
   }
}

При запуске grunt будет создан и затем будет обновляться файл core.css.map, а в core.css в самый конец файла будет добавлена строка:/*# sourceMappingURL=/assets/css/core.css.map */Теперь в chrome dev tools мы сможем просматривать исходники less вот так (в firebug не работает, но может есть какие-то дополнения если поискать):

Готовая картинка Qatar Airways

т.е. видно прямой reference на blocks.less вместо ссылки на скомпилированный core.css

Можно, конечно, обходиться и без source map, но на большом проекте с множеством less файлов удобство работы с less будет ощутимо.


Следующая:  Инструменты: PSD в браузере

Предыдущая:  Qatar Airways : paperjs

Другие статьи


Тел. 8 (800) 7075374
8 (351) 2251874