Возможно ли работать с инструментами разработчика Chrome с меньшим количеством файлов?

Question

Работает на тему мобильных для Oxid eshop. У меня возникли трудности с настройкой конфигурации grunt, чтобы скомпилировать меньше файлов вместе с исходной картой, чтобы я мог работать с инструментами разработчика Chrome. У меня есть последние версии модулей grunt и npm. Мой Weserver для тестирования - XAMPP на Windows7.

Структура файла (соответствующая часть только)

из
-Мобильные
--src
--- CSS
--- меньше

Как вы можете видеть волшебство происходит в out/mobile/src/less и out/mobile/src/css.

Мой Gruntfile.js: Чем меньше части выглядит так:

// Compile specified less files 
     less: { 
      compile: { 
       options: { 
        // These paths are searched for @imports 
        paths: ["out/mobile/src/less"], 
        sourceMap: true, 
        sourceMapFilename: 'out/mobile/src/css/oxid.css.map', 
        sourceMapBasepath: 'out/mobile/src/css', 
       }, 

       files: { 
        // target.css file: source.less file 
        "out/mobile/src/css/oxid.css": "out/mobile/src/less/oxid.less" 
       } 
      } 
     }, 

Который работает: он выводит CSS и souremap.css.map

В конце сгенерированного файла CSS там является

/*# sourceMappingURL=oxid.css.map */ 

, который выглядит хорошо для меня

filepaths в файле sourcemap выглядят так:

out/mobile/src/less/custom.less 

, который, кажется, тоже в порядке.

Теперь хром devtools (хром 31, хром 32) файлы отображаются как безликие файлы, а не css, что не так уж и плохо. Тем не менее при наведении курсора на имена файлов пути не являются правильными, но что-то вроде этого:

http://localhost/web/out/mobile/src/css/out/mobile/src/less/custom.less 

Как вы можете видеть его объявления, тем меньше путь к пути CSS, который, конечно, может не работать.

Что мне не хватает? Есть ли способ иметь правильные пути? Или это grunt-contrib-less/Chrome dev-tools, которые не способны на это?

Надеемся на любые идеи сообщества. Спасибо.

Answer 1

У меня была такая же проблема и я понял после немного рытья.

В этом проблема: Chrome фактически не знает, где находится настоящий каталог. Вы должны четко сказать, что

Ok Chrome здесь каталог:

http://localhost/web/out/mobile/src/css/out/mobile/src/less/custom.less

и вы не знаете, что означает, что этот путь на сервере.Вот путь, который вы должны смотреть на него:

c:\out\mobile\src\less\custom.less "

Чтобы сделать это, вы должны добавить меньше папку в рабочей области Перейдите на вкладку источников, найдите каталог как css/out/mobile/src... и щелкните правой кнопкой мыши на. его и нажмите , добавьте в рабочую область. После этого щелкните правой кнопкой один из ваших менее файлов и нажмите . Карта на ресурс файловой системы, и все готово. Возможно, вам может понадобиться обновить страницу пару раз, потому что Chrome иногда не могут быть признаны.

Полный учебник: http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636

Убедитесь, что вы делаете шаг 1-4 правильно.