Compilation Play framework-在运行时访问资产

再见

我试图实现的目标是：使用play，同时能够在chrome开发工具中编辑javascript和LessFile

我得出的结论是：如果将项目的“public”文件夹添加到chrome开发工具的resources选项卡中的工作区中，一切都会按预期进行。chrome开发工具中所做的更改会保存到相应的css和JavaScriptFile中，页面会实时反映更改。 如果将“app/assets/stylesheets”目录添加到chrome dev workspace-->中，则会发生同样的情况-->在控制台中对文件所做的更改将保存到保存在光盘上的文件中

此外，如果从控制台运行“activator~run”，则对任何需要编译的文件所做的更改都会触发重新编译。我达到了可以在开发工具中更改更少代码的程度。将更改写入本地文件并使播放重新编译。一切都很好，很漂亮，但不幸的是，一切都结束了：/

问题：我使用less，less被编译到了一个不确定的地方（我还没有弄清楚确切的位置）。如果我不知道目录，我就无法将css文件（从less文件编译）添加到chrome开发控制台的工作区-这意味着chrome不知道何时重新绘制页面，并且控制台中出现“ressource not available”错误。 首先，我认为页面样式的css存储在项目的“目标”文件夹中，但事实并非如此。（我将目标文件夹添加到工作区，但更改此文件夹中的css文件不会反映在页面上）

我的问题：从less文件编译后，css在哪里？ 或者是否有其他方法可以在浏览器中启用less（或任何已编译脚本/样式源）的实时编辑？

告诉您：

请注意，托管资源不会直接复制到 应用程序公用文件夹，但保存在中的单独文件夹中 target/scala-2.9.1/resources\u managed

---

好吧，我知道了。对于所有想知道如何编辑play project live中较少的文件并将更改保存到源文件的人，以下是我如何做到的。此解决方案适用于使用较少样式的playframework开发人员，尽管我认为您应该能够以类似的方式解决每个css预处理器的问题。请注意，我使用Chrome开发工具实时编辑我的代码：

首先，您必须将这行代码添加到build.sbt中：

//enable source Map for lesscompilation
LessKeys.sourceMap in (Assets, LessKeys.less) := true

您需要源映射，以便chromedev工具可以将css映射到相应的lessfile。重新编译后，在chrome中重新加载项目并点击f12以打开chrome开发工具。您的Less文件应正确映射：

请注意，侧面板指向“modules.less”-->单击此指针会弹出Sources面板并打开相应的文件。如果你进入，编辑文件并点击ctrl s进行保存，但是什么也不会发生。这是因为Chrome开发工具不知道在哪里保存对磁盘的更改

---

要告诉Chrome开发工具保存更改的位置，您需要设置一个工作区。为此，在Chrome开发工具中打开“源代码”面板。在左侧，有一个文件树。在该窗格中单击鼠标右键，然后单击“将文件夹添加到工作区”。工作区将本地文件映射到Url，反之亦然。这里有一个链接，可以深入解释Chrome开发工具工作区：

我必须选择的文件夹位于此处：

路径至项目/target/web/public/main

现在这令人困惑，因为正如@Bass Jobsen在他的帖子中提到的：

告诉你：

请注意，托管资源不会直接复制到 应用程序公用文件夹，但保存在中的单独文件夹中 target/scala-2.9.1/resources\u managed

但在我的例子中，“target/sacal-2.9.1”中没有“resources_managed”这样的文件夹。经过几个小时的混乱，我发现页面使用的文件与“pathtoyorproject/target/web/public/main”中的文件相对应。可能只有我一个人，请随意评论

---

配置工作区后，实时编辑仍然无法工作。这是因为less需要编译。那么，如果你不重新编译更少的文件，css怎么知道有些东西已经改变了呢？要启用实时编辑，您需要监视较少的文件，并在发生更改时将其编译为css。我用grunt完成了这项任务：

我不会详细介绍grunt，它有很好的文档记录。我将发布我使用的gruntfile。正如您所看到的，grunt侦听“target/web/public/main/stylesheets”文件夹中较少文件的所有更改。如果发生更改，将启动任务“less”，重新编译文件“final.less”（这是导入所有其他less文件的文件）。重新编译后，grunt将所有.less文件复制到项目的“app/assets/stylesheets”目录中。这是为了将对Chrome开发工具中的less文件所做的更改转化为项目的实际less文件。 我曾经

• grunt contrib副本-->
• grunt contrib less-->
• grunt contrib手表-->

以下是文件：

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开发工具中使用play设置less的实时编辑。请注意，您不能在开发工具的“元素”窗格中编辑less文件。在那里所做的更改将删除less和css文件的映射。但是，如果按住ctrl键并单击属性或类，则会转到“源”窗格中相应的文件和类/属性。保存的更改将触发重新编译较少的文件，并弹出-->您正在实时编辑页面：） 我希望我能在这个职位上帮助别人

链接和来源：

---

是的，我读过。我不知道为什么，但这个文件夹不存在于我的项目中-有点混乱