わかりました。Play プロジェクトのより少ないファイルをライブで編集し、変更をソース ファイルに保存する方法を疑問に思っている皆さんのために、私がそれを達成した方法を次に示します。このソリューションは、スタイリングにあまり使用しない 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 s を押して保存しても何も起こりません。これは、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 にコンパイルする必要があります。私はそのタスクにうなり声を使用しました：
http://gruntjs.com/getting-started
grunt については詳しく説明しませんが、十分に文書化されています。私が使用する gruntfile を投稿します。ご覧のとおり、grunt は「target/web/public/main/stylesheets」フォルダー内のより少ないファイルのすべての変更をリッスンします。変更が発生すると、ファイル「final.less」を再コンパイルするタスク「less」が開始されます (これは、他のすべての less-files をインポートするファイルです)。再コンパイル後、grunt はすべての .less ファイルをプロジェクトの「app/assets/stylesheets」ディレクトリにコピーします。これは、Chrome Dev Tool で less ファイルに加えられた変更をプロジェクトの実際の less ファイルに反映するために必要です。使った
ファイルは次のとおりです。
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 で play を使って less のライブ編集をセットアップする方法です。開発者ツールの要素パネルで less ファイルを編集できないことに注意してください。そこに変更を加えると、less ファイルと css ファイルのマッピングが削除されます。ただし、プロパティまたはクラスを Ctrl キーを押しながらクリックすると、ソース パネルの対応するファイルおよびクラス/プロパティに移動します。保存された変更により、少ないファイルとブームの再コンパイルがトリガーされます->ページをライブ編集しています:)この投稿で誰かを助けることができれば幸いです。
リンクとソース:
