Question

Gooday。

我尝试实现的目标：使用游戏，同时能够在chrome dev工具中编辑javascript和lessfiles。

我想通了：如果你添加＆＃34; public＆＃34;项目的文件夹到chrome dev工具的ressources选项卡中的工作区，一切都按预期工作。 chrome dev工具中所做的更改将保存到相应的css和javascript文件中，页面会实时反映更改。如果您添加＆＃39; app / assets / stylesheets＆＃39;目录到chrome dev工作区 - ＆gt;对控制台中文件所做的更改将保存到光盘上保存的文件中。

此外，如果你运行'激活器〜运行＆＃39;从控制台，对任何需要编译的文件所做的更改会触发重新编译。我得到了这一点，我可以在开发工具中更改我的代码。 ritten到本地文件并进行重新编译的更改。所有的精致和花花公子，悲伤的布鲁特 - 它都结束了：/

问题：我的工作量越来越少，而且很少被编译到一些神秘的地方（我还没弄清楚到底在哪里）。如果我不知道目录，我无法将css文件（由较少的文件编译）添加到chrome dev控制台的工作区中 - 这意味着chrome不知道何时重绘页面而我得到一个不可用的资源＆＃39;控制台中出错。首先，我认为实际设置页面样式的css存储在＆＃39; target＆＃39;项目的文件夹，但事实并非如此。（我将目标文件夹添加到工作区，但更改此文件夹中的css文件并未反映在页面上）

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

Answer 1

好的我明白了。对于你们所有人都想知道如何编辑实时播放项目中较少的文件并将更改保存到源文件，继续我是如何实现它的。此解决方案适用于使用较少造型的playframework开发人员 - 虽然我认为你应该能够以类似的方式解决每个css预处理器的问题。请注意，我使用Chrome开发工具实时编辑我的代码：

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

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

您需要源地图，以便Chrome开发工具可以将css映射到相应的lessfiles。重新编译后，在chrome中重新加载项目并点击f12以显示Chrome Dev Tool。您的Less文件应该正确映射：

https://s3.amazonaws.com/robdodson/images/less-preview.png

请注意，sidepannel指向“modules.less” - ＆gt;单击此指针可以打开“源”面板并打开相应的文件。如果你进去，编辑文件并点击按钮进行保存，但没有任何反应。因为Chrome开发工具不知道将更改保存到磁盘的位置。

要告知Chrome开发者工具保存更改的位置，您需要设置工作区。为此，请在Chrome开发工具中打开“来源”面板。在左侧，您有一个文件树。右键单击该面板，然后单击“将文件夹添加到Workspace”。工作区将您的本地文件映射到Url，反之亦然。下面是对Chrome Dev Tool工作区的深入解释的链接：

https://developer.chrome.com/devtools/docs/workspaces

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

pathToYourProject /目标/网络/公共/主

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

https://www.playframework.com/documentation/2.0/AssetsLess告诉你：

请注意，托管资源不会直接复制到您的   应用程序公用文件夹，但保存在单独的文件夹中   目标/阶-2.9.1 / resources_managed。

但在我的情况下，“target / sacal-2.9.1”中没有“resources_managed”这样的文件夹。经过几个小时的混乱，我发现页面使用的文件对应于“pathToYourProject / target / web / public / main”中的文件。可能只是我，请随意评论。

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

http://gruntjs.com/getting-started

我不会详细介绍有关grunt的任何细节，这是有据可查的。我将发布我使用的grunt文件。如您所见，grunt侦听文件夹“target / web / public / main / stylesheets”中较少文件的所有更改。如果发生更改，则启动“less”任务，重新编译文件“final.less”（这是导入所有其他less文件的文件）。重新编译后，grunt将所有.less文件复制到项目的“app / assets / stylesheets”目录中。这是将Chrome开发工具中较少文件所做的更改带到项目实际较少文件的麻烦。我用了

grunt-contrib-copy - ＆gt; https://github.com/gruntjs/grunt-contrib-copy
grunt-contrib-less - ＆gt; https://github.com/gruntjs/grunt-contrib-less
咕噜-的contrib手表 - ＆GT; 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的Elements面板中编辑less文件。在那里进行的更改将删除less和css文件的映射。如果按住Ctrl键单击属性或类，则会转到源面板中的相应文件和类/属性。保存的更改将触发重新编译较少的文件和繁荣 - ＆gt;你正在编辑你的页面:) 我希望我可以帮助这个帖子。

链接和来源：

Answer 2

https://www.playframework.com/documentation/2.0/AssetsLess告诉你：

请注意，托管资源不会直接复制到您的应用程序公用文件夹，但保存在单独的文件夹中目标/阶-2.9.1 / resources_managed。

Play框架 - 在运行时访问资产

2 个答案: