Play framework - доступ к ресурсам во время выполнения
Gooday.
Чего я пытаюсь достичь: используйте play, когда можете редактировать javascript и lessfiles вживую с помощью инструмента chrome dev.
Что я понял: если вы добавите "общую" папку проекта в рабочую область на вкладке "Ресурсы" инструмента Chrome Dev, все будет работать как положено. Изменения, сделанные в инструменте chrome dev, сохраняются в соответствующих файлах css и javascript, и на странице отображаются изменения в реальном времени. То же самое происходит, если вы добавляете каталог 'app/assets/stylesheets' в рабочую область chrome dev -> изменения, внесенные в файл в консоли, сохраняются в файле, сохраненном на диске.
Кроме того, если вы запустите 'activator ~ run' из консоли, изменения, внесенные в любой файл, требующий компиляции, вызовут перекомпиляцию. Я дошел до того, что смог изменить свой меньший код в инструменте dev. Изменения, где перетаскиваются в локальный файл и производятся перекомпиляции воспроизведения. Все отлично и денди, печально, бууут - на этом все и закончилось:/
Проблема: я работаю с меньшими затратами, а меньше компилируется в какое-то загадочное место (где я еще точно не выяснил). Я не могу добавить файл css (который был скомпилирован из файла less) в рабочую область консоли chrome dev, если я не знаю каталог - это означает, что chrome не знает, когда перерисовывать страницу, и я получаю 'ресурс' ошибка недоступна в консоли. Сначала я подумал, что CSS, который на самом деле стилизует страницу, хранится в папке 'target' проекта, но это не так. (Я добавил целевую папку в рабочую область, но изменение CSS-файлов в этой папке не отразилось на странице)
Мой вопрос: где находится css после компиляции из меньшего файла? Или есть другой способ включить liveediting of less (или любой другой скомпилированный скрипт / источник стилей) в браузере?
2 ответа
https://www.playframework.com/documentation/2.0/AssetsLess сообщает вам:
Обратите внимание, что управляемые ресурсы не копируются непосредственно в общую папку вашего приложения, но хранятся в отдельной папке в target/scala-2.9.1/resources_managed.
Хорошо, я понял это. Для всех вас, кто интересуется, как вы можете редактировать меньше файлов вашего игрового проекта в прямом эфире и сохранять изменения в исходных файлах, вот как я это сделал. Это решение предназначено для разработчиков playframework, которые используют меньше для своего стиля - хотя я думаю, что вы должны быть в состоянии решить проблему аналогичным образом с каждым препроцессором css. Обратите внимание, что я использую Chrome Dev Tool для прямого редактирования своего кода:
Прежде всего, вы должны добавить эту строку кода в ваш build.sbt:
//enable source Map for lesscompilation
LessKeys.sourceMap in (Assets, LessKeys.less) := true
Вам нужна исходная карта, чтобы Chrome Dev Tool мог сопоставить CSS с соответствующими меньшими файлами. После перекомпиляции перезагрузите проект в Chrome и нажмите f12, чтобы вызвать Chrome Dev Tool. Ваши файлы Less должны отображаться правильно:
https://s3.amazonaws.com/robdodson/images/less-preview.png
Обратите внимание, что боковая панель указывает на "modules.less" -> щелчок по этому указателю открывает панель "Источники" и открывает соответствующий файл. Если вы войдете, отредактируйте файл и нажмите ctrl s для сохранения, но ничего не произойдет. Это потому, что Chrome Dev Tool не знает, где сохранить изменения на диск.
Чтобы сообщить Chrome Dev Tool, где сохранить изменения, вам нужно настроить рабочее пространство. Для этого откройте панель "Источники" в Chrome Dev Tool. С левой стороны у вас есть дерево файлов. Щелкните правой кнопкой мыши в этой панели и выберите "добавить папку в рабочую область". Рабочая область отображает ваши локальные файлы в URL и наоборот. Вот ссылка на подробное объяснение рабочей области Chrome Dev Tool:
https://developer.chrome.com/devtools/docs/workspaces
Папка, которую я должен был выбрать, была расположена здесь:
pathToYourProject / цель / веб / государственный / главный
Теперь это сбивает с толку, потому что @Bass Jobsen упомянул в своем посте:
https://www.playframework.com/documentation/2.0/AssetsLess сообщает вам:
Обратите внимание, что управляемые ресурсы не копируются непосредственно в общую папку приложения, а хранятся в отдельной папке в target / scala-2.9.1 / resources_managed.
Но в моем случае не было такой папки, как "resources_managed" в "target/sacal-2.9.1". После нескольких часов путаницы я обнаружил, что файлы, используемые страницей, соответствуют файлам, расположенным в "pathToYourProject / target/web/public/main". Вероятно, это только я, не стесняйтесь комментировать это.
После настройки рабочего пространства редактирование в реальном времени по-прежнему не работает. Это связано с тем, что меньше нужно компилировать. Так как же CSS может узнать, что что-то изменилось, если вы не перекомпилируете меньше файлов? Чтобы включить редактирование в реальном времени, вам нужно просмотреть свои меньше файлов и скомпилировать их в css, если произойдут изменения. Я использовал grunt для этой задачи:
http://gruntjs.com/getting-started
Я не буду вдаваться в подробности о ворчании, это хорошо задокументировано. Я просто опубликую файл grunt, который я использую. Как вы можете видеть, grunt прослушивает все изменения в файлах поменьше в папке "target/web/public/main / stylesheets". Если происходят изменения, инициируется задача 'less', которая перекомпилирует файл "final.less" (это файл, который импортирует все остальные файлы less). После перекомпиляции grunt копирует все файлы.less в каталог app / assets / stylesheets проекта. Это необходимо для внесения изменений, внесенных в файлы поменьше в Chrome Dev Tool, в файлы фактических чисел проекта. я использовал
- grunt-contrib-copy -> https://github.com/gruntjs/grunt-contrib-copy
- grunt-contrib-less -> https://github.com/gruntjs/grunt-contrib-less
- grunt-contrib-watch -> https://www.npmjs.com/package/grunt-watch-github
Вот файл:
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');
}
Вот как я настраивал живое редактирование менее с игрой в Chrome Dev Tool. Обратите внимание, что вы не можете редактировать меньший файл в панели элементов инструмента разработки. Внесенные там изменения удалят отображение файлов less и css. Если вы щелкнете по свойствам или классам, удерживая клавишу Ctrl, вы попадете в соответствующий файл и класс / свойство в панели источников. Там сохраненные изменения вызовут перекомпиляцию меньшего файла и бума -> вы живете, редактируя свою страницу:) Я надеюсь, что смогу помочь кому-нибудь с этим сообщением.
Ссылки и источники: