0

手动部署 Dart Web-ui 应用程序的最佳策略是什么？

pub deploy 对我不起作用，我提出了错误报告。所以我在想什么是手动部署的最佳方式。

我是这样开始的：

1）从项目根目录编译webui组件（dwc.dart）

2) 将目录更改为 web/out 然后运行 ​​dart2js

3) 将所有 .js 文件复制到服务器上的该 scripts/js 公用文件夹中

4) 将 appname.html 复制到服务器，将 css 和脚本路径更改为选项 3

5) 确保 dart.js 也在与第 3 项相同的目录中

这是据我所知。那么我还需要做什么呢？

几个问题：

1）我是否手动更改生成的 .js 文件中的文件路径以指向服务器上的公共文件夹以获取它们所引用的文件，并确保这些文件也在服务器上？

2）我还需要将所有包复制到服务器吗？

3）服务器上有任何首选的文件结构吗？

对此的任何提示都非常感谢。

谢谢。

4

2 回答 2

0

我可以为您提供一个 Grunt 脚本来了解任务的顺序。实际上我使用的顺序是这个：

  1. 创建构建目录。我通常使用/build/web。我通常在 /web 目录中创建这些文件（index.html、main.dart、/css 等）。我将其余组件创建到 /lib 目录中。
  2. 将包含 main() 函数的 .dart 文件（对于更简单的项目，在我的情况下为“main.dart”）文件编译为 Javascript 并将其放入 /build/web 目录
  3. 将其他需要的文件和文件夹复制到 /build/web 目录。此外，在此过程中，您将复制项目所需的包。您将在下面提供的示例中看到。
  4. 从项目中删除所有空文件夹
  5. 构建过程结束后，您可以创建 Grunt 任务以在浏览器中打开 /index.html 文件（我不会提供此示例）

飞镖测试项目的结构：

testApp
  - gruntfile.js
  - package.js
  /lib
  /packages
      /angular
  /web
    - index.html
    - main.dart
    /css
    /img

因此，涵盖 1 到 4 步骤的 Grunt 示例脚本如下所示（将其复制到 gruntfile.js）：

module.exports = function (grunt) {
    grunt.initConfig({
        // 1.
        // create build web directory
        mkdir: {
            build: {
                options: {
                    create: ['build/web']
                }
            }
        },
        // 2.
        // compile dart files
        dart2js: {
            options: {
                // use this to fix a problem into dart2js node module. The module calls dart2js not dart2js.bat.
                // this is needed for Windows. So use the path to your dart2js.bat file
                "dart2js_bin": "C:/dart/dart-sdk/bin/dart2js.bat"
            },
            compile: {
                files: {'build/web/main.dart.js': 'web/main.dart'}
            }
        },
        // 3.
        // copy all needed files, including all needed packages
        // except the .dart files.
        copy: {
            build: {
                files: [
                    {
                        expand: true,
                        src: [
                            'web/!(*.dart)',
                            'web/css/*.css',
                            'web/res/*.svg',
                            'web/packages/angular/**/!(*.dart)',
                            'web/packages/browser/**/!(*.dart)'
                        ],
                        dest: 'build'
                    }
                ]
            }
        },
        // 4.
        // remove empty directories copied using the previous task
        cleanempty: {
            build: {
                options: {
                    files: false
                },
                src: ['build/web/packages/**/*']
            }
        },
    });

    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.registerTask('default', [
        'mkdir:build',
        'dart2js',
        'copy:build',
        'cleanempty:build'
    ]);
};

这是 Grunt 脚本示例。

在项目的根目录中创建一个 /gruntfile.js 文件并将脚本复制/粘贴到其中。

在项目的根目录中创建一个 /package.json 文件并复制/粘贴以下脚本：

{
  "name": "testApp",
  "version": "0.0.1",
  "description": "SomeDescriptionForTheTestApp",
  "main": "",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
  "author": "YourName",
  "peerDependencies": {
      "grunt-cli": "^0.1.13"
  },
  "devDependencies": {
      "grunt": "^0.4.5",
      "grunt-cleanempty": "^1.0.3",
      "grunt-contrib-copy": "^0.7.0",
      "grunt-dart2js": "0.0.5",
      "grunt-mkdir": "^0.1.2",
      "matchdep": "^0.3.0"
  }
}

在 Windows 中打开命令提示符，在 Linux 中打开终端，导航到项目的根目录并使用以下命令：

npm install

等到所有需要的 Grunt 模块都下载到你的本地项目中。完成后，在命令提示符或终端中发出以下命令：

node -e "require('grunt').cli()"

您可以使用它来启动 Grunt 默认任务，而无需在系统上全局安装 Grunt。

现在，要了解项目的确切构建结构（包括项目所需的包），请使用 Pub Build 进行构建。然后您将能够指示 Grunt 创建相同的 dir 结构。

如果需要，您可以添加其他任务（如缩小）。

希望这将帮助大家理解该过程并让您首先开始使用测试应用程序。添加您的评论以使其变得更好并更加简化。

于 2015-02-27T14:22:53.397 回答
0

我为它写了一个 Grunt 脚本（因为我没有时间查找如何正确地为 Grunt 编写代码，所以我没有分享代码，因为它很乱）但我基本上是这样做的：

  • 将带有 dwc 的文件列表编译到给定的out目录
  • 将其编译为 javascript
  • 清理所有不可部署的文件
  • 更改 HTML 中的一些路径以匹配服务器路径（由于某些原因，这会被编译过程更改）
  • 删除除我真正需要的包之外的所有包（JS interopt 和浏览器）

由于我只使用 JS 版本，所以我删除了所有 dart 包。由于 HTML 文件中的路径由您决定，您已经可以使用适合您/您的服务器的结构。

于 2013-07-08T07:47:03.677 回答