Хорошо, я понял это. Для всех вас, задающихся вопросом, как вы можете редактировать меньше файлов вашего игрового проекта в реальном времени и сохранять изменения в исходных файлах, вот как я этого добился. Это решение предназначено для разработчиков playframework, которые меньше используют для своего стиля. Хотя я думаю, что вы сможете решить проблему аналогичным образом с каждым препроцессором css. Обратите внимание, что я использую Chrome Dev Tool для редактирования кода в реальном времени:
прежде всего вы должны добавить эту строку кода в свой build.sbt:
//enable source Map for lesscompilation
LessKeys.sourceMap in (Assets, LessKeys.less) := true
Вам нужна исходная карта, чтобы Chrome Dev Tool мог сопоставить css с соответствующими файлами lessfiles. После перекомпиляции перезагрузите проект в Chrome и нажмите F12, чтобы открыть Chrome Dev Tool. Ваши файлы Less должны быть правильно сопоставлены:
https://s3.amazonaws.com/robdodson/images/less-preview.png
Обратите внимание, что боковая панель указывает на «modules.less» --> щелчок по этому указателю вызывает панель «Источники» и открывает соответствующий файл. Если вы войдете, отредактируете файл и нажмете ctrl для сохранения, ничего не произойдет. Это потому, что Chrome Dev Tool не знает, где сохранить изменения на диске.
Чтобы сообщить Chrome Dev Tool, где сохранить изменения, вам нужно настроить рабочую область. Для этого откройте панель «Источники» в Chrome Dev Tool. С левой стороны у вас есть файловое дерево. Щелкните правой кнопкой мыши на этой панели и выберите «Добавить папку в рабочую область». Рабочая область сопоставляет ваши локальные файлы с URL-адресом и наоборот. Вот ссылка на подробное объяснение рабочей области Chrome Dev Tool:
https://developer.chrome.com/devtools/docs/workspaces
Папка, которую я должен был выбрать, находилась здесь:
pathToYourProject/target/web/public/main
теперь это сбивает с толку, потому что, как упомянул @Bass Jobsen в своем посте:
https://www.playframework.com/documentation/2.0/AssetsLess говорит вам:
Обратите внимание, что управляемые ресурсы не копируются непосредственно в общую папку вашего приложения, а сохраняются в отдельной папке в target/scala-2.9.1/resources_managed.
Но в моем случае в "target/sacal-2.9.1" такой папки как "resources_managed" не было. После нескольких часов путаницы я обнаружил, что файлы, используемые страницей, соответствуют файлам, расположенным в «pathToYourProject/target/web/public/main». Наверное, это только я, не стесняйтесь комментировать это.
После настройки рабочей области живое редактирование по-прежнему не будет работать. Это связано с тем, что меньше нуждается в компиляции. Итак, как css может узнать, что что-то изменилось, если вы не перекомпилируете файлы less? Чтобы включить редактирование в реальном времени, вам нужно следить за своими меньшими файлами и компилировать их в css, если происходят изменения. Я использовал grunt для этой задачи:
http://gruntjs.com/getting-started
Я не буду вдаваться в подробности о grunt, он хорошо задокументирован. Я просто опубликую файл grunt, который я использую. Как видите, grunt слушает все изменения в файлах less в папке «target/web/public/main/stylesheets». Если происходят изменения, инициируется задача «less», которая перекомпилирует файл «final.less» (это файл, который импортирует все остальные less-файлы). После перекомпиляции grunt копирует все файлы .less в каталог app/assets/stylesheets проекта. Это необходимо для того, чтобы внести изменения, внесенные в меньшее количество файлов в Chrome Dev Tool, в фактические меньшее количество файлов проекта. я использовал
Вот файл:
module.exports = function(grunt){
grunt.initConfig({
less: {
development:{
options:{
sourceMap: true,
},
files:{
'target/web/public/main/stylesheets/final.css':'target/web/public/main/stylesheets/final.less',
}
}
},
watch: {
styles:{
options:{
livereload: true,
spawn: false,
event: ['added','deleted','changed']
},
files:['target/web/public/main/stylesheets/**/*.less'],
tasks:['less','copy']
}
},
copy: {
main: {
files: [
{expand: true, cwd: 'target/web/public/main/stylesheets/', src:['**/*.less'], dest:'app/assets/stylesheets/'}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
}
Вот как я настроил живое редактирование less with play в Chrome Dev Tool. Обратите внимание, что вы не можете редактировать файл less на панели Elements Dev Tool. Внесенные там изменения удалят сопоставление файлов less и css. Однако, если вы щелкнете, удерживая клавишу Ctrl, на свойствах или классах, вы попадете в соответствующий файл и класс/свойство на панели источников. Там сохраненные изменения вызовут перекомпиляцию файла less и бум --> вы редактируете свою страницу в реальном времени :) Надеюсь, я смогу помочь кому-нибудь этим постом.
Ссылки и источники:
person
user3555936
schedule
22.12.2014
